快速入門
安裝:npm i -S react-router react-router-dom
GitHub:ReactTraining/react-router
React Router中有三種型別的元件:路由器元件(BrowserRouter),路由匹配元件(Route)和導航元件(Link)。
路由器
每個React Router應用程式的核心應該是一個路由器元件。
對於Web專案,react-router-dom提供BrowserRouter
和HashRouter
路由器。
路由器會包含所有路由元件。需要注意路由器節點下只能一個根節點。
路由匹配元件
Route:
path路徑(string): 路由匹配路徑。(沒有path屬性的Route 總是會 匹配);
exact精準(bool):為true時,則要求路徑與location.pathname必須完全匹配;
strict嚴格(bool):為true時,有結尾斜線的路徑只能匹配有斜線的location.pathname;
strict示例:
路徑 | location.pathname | strict | 是否匹配 |
---|---|---|---|
/one/ | /one | true | 否 |
/one/ | /one/ | true | 是 |
/one/ | /one/two | true | 是 |
路由示例:
import {
HashRouter as Router,
Route,
Link,
NavLink,
Switch
} from `react-router-dom`;
import App from `./App.js`;
function NavBar(){
return (
<Router>
<div>
<Route component={Nav} />
<Switch>
<Route exact path=`/` component={() => (<div>hello</div>)} />
<Route path=`/app` component={App} />
</Switch>
</div>
</Router>
);
}
導航元件
Link:在應用中,提供導航功能
NavLink:Link的一個特殊版本,當匹配指定URL的時候,會給元素新增style
示例:
<Link to="/profile"/>
<NavLink to="/profile" activeStyle={{color:`red`}}/>
Code Split
使用Router的Code Split(按需載入)依賴webpack(預設支援)、babel-plugin-syntax-dynamic-import和react-loadable。
babel-plugin-syntax-dynamic-import
: 意味著Babel處理時不會做任何額外的轉換。該外掛只是允許Babel解析動態匯入
npm i babel-plugin-syntax-dynamic-import react-loadable -S
.bashrc:
{
"presets": [
"react"
],
"plugins": [
"syntax-dynamic-import"
]
}
程式碼示例:
import Loadable from `react-loadable`;
function Loading(){
return (
<div> Loading... </div>
)
}
const Clock = Loadable({
loader: () => import(`./Clock`),
loading: Loading,
});
export default class LoadableClock extends React.Component {
render() {
return <Clock />;
}
}