今天天氣很好,趕到公司也是熱的汗流浹背...
react-router 與 react-router-dom的關(guān)系
react-router-dom
與react-router
為主分支關(guān)系,react-router v4之后,分為了幾個(gè)獨(dú)立的包
-
react-router React
Router 核心 -
react-router-dom
用于 DOM 綁定的 React Router -
react-router-native
用于 React Native 的 React Router -
react-router-redux
React Router 和 Redux 的集成 -
react-router-config
靜態(tài)路由配置的小助手
react-router-dom
依賴于react-router
,大多組件都只是從react-router
中引入然后直接導(dǎo)出,不同的就是多了 <Link> <BrowserRouter>組件。所以web應(yīng)用只需要引入react-router
或者react-router-dom
一項(xiàng)即可。
主要組件
1. Router
<BrowserRouter>
使用h5 history API( pushState,replaceState和popstate事件),讓UI與URL同步。<HashRouter>
使用URL(即window.location.hash)的哈希部分來保持UI與URL同步。因?yàn)槠鋒istory不支持location.key或location.state,推薦使用<BrowserRouter>
代替。<MemoryRouter>
在內(nèi)存中維護(hù)history中的“URL”,不讀取或?qū)懭氲降刂窓凇T跍y試和非瀏覽器環(huán)境(如React Native
)中很有用。<NativeRouter>
適用于React Native
的一個(gè)路由器<StaticRouter>
不可改變其location
的一個(gè)Router
,主要適用于服務(wù)器渲染。
2. Switch
保證只渲染第一個(gè)匹配location
的組件,上代碼
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
上述Route
節(jié)點(diǎn),如果訪問/about
路徑,則About,User,NoMatch
三個(gè)組件都將被渲染,因?yàn)槿齻€(gè)path
都被匹配成功,可能這并不是你想要的結(jié)果。如果包裹Switch
組件,則只會(huì)渲染第一個(gè)匹配的組件About
。
<Switch>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>
3. Route
負(fù)責(zé)location
匹配及組件渲染的組件,通常作為Switch
或者Router
子組件。參數(shù)包括exact ,path, component, render, children
,三個(gè)渲染方法中(component, render, children
)只能選擇一個(gè),大多數(shù)情況都只是使用component
就夠了。
4. Link
一個(gè)文本導(dǎo)航組件,跟<a>
標(biāo)簽有點(diǎn)類似,不過是路由跳轉(zhuǎn)。
<Link to="/about">About</Link>
點(diǎn)擊About
就會(huì)直接跳到/about
路徑。
< NavLink >
一個(gè)特殊版本<Link>
,它將在與當(dāng)前URL匹配時(shí)為渲染元素添加樣式屬性。
直接傳入className
<NavLink to="/faq" activeClassName="selected">
FAQs
</NavLink>
或者直接傳入style
樣式
<NavLink
to="/faq"
activeStyle={{fontWeight: "bold",color: "red" }}
>
FAQs
</NavLink>
5. Redirect
路由重定向組件
<Redirect exact from="/" to="/dashboard" />
from
為匹配的路徑,如果匹配成功,不會(huì)加載組件,而是重定向到to
指定的路徑。exact
表示路徑需要完全匹配。
實(shí)例
1、創(chuàng)建一個(gè)路由配置routerConfig
,用來集中管理多個(gè)路由組件及屬性。
const routerConfig = [
{
path: '/',
exact:true,
component: Startup
},
{
path: '/main',
component: App
},
{
path: '/welcome',
component: Welcome
}
];
2、自定義一個(gè)AppRouter
組件,解析routerConfig
,創(chuàng)建Route
等組件
import React, { Component } from 'react';
import { Switch, Route, MemoryRouter } from 'react-router-dom';
import routerConfig from '../../routerConfig';
class AppRouter extends Component {
/**
* 渲染路由組件
*/
renderNormalRoute = (item, index) => {
return item.component ? (
<Route
key={index}
path={item.path}
component={item.component}
exact={item.exact}
/>
) : null;
};
render() {
return (
<MemoryRouter>
<Switch>
{/* 渲染路由表 */}
{routerConfig.map(this.renderNormalRoute)}
{/* 首頁默認(rèn)重定向到 /dashboard */}
{/*<Redirect exact from="/" to="/dashboard" />*/}
</Switch>
</MemoryRouter>
);
}
}
export default AppRouter;
因?yàn)槟壳笆且苿?dòng)端app路由,所以使用的是MemoryRouter
,基本也用不上Redirect
。這里也可以再封裝一層,寫一些固定布局,不隨路由變化的布局。
3、最后再render AppRouter
組件
ReactDOM.render(
<AppRouter />,
ICE_CONTAINER
);
4、在頁面中使用
import {withRouter} from 'react-router-dom';
@withRouter
class Startup extends Component {
// .....
}
使用withRouter
注入相關(guān)類中,直接調(diào)用類屬性中的history.push
方法就可直接跳轉(zhuǎn)路由
this.props.history.push("/main");
允許帶入?yún)?shù)
this.props.history.push("/main", {type:1});
或者直接寫入路徑中
this.props.history.push("/main?type=1");
至此,就簡單的集成了react-router-dom
。
關(guān)于react-router
,其實(shí)還有很多很多沒有寫,但是呢,日記就先寫到這里,想太多一天也寫不完,就只是簡單記錄下個(gè)人理解及代碼過程。end...