React從入門到放棄(5):ReactRouter4

Never、C發表於2018-05-24

快速入門

安裝:npm i -S react-router react-router-dom

GitHub:ReactTraining/react-router

React Router中有三種型別的元件:路由器元件(BrowserRouter),路由匹配元件(Route)和導航元件(Link)。

路由器

每個React Router應用程式的核心應該是一個路由器元件。

對於Web專案,react-router-dom提供BrowserRouterHashRouter路由器。

路由器會包含所有路由元件。需要注意路由器節點下只能一個根節點。

路由匹配元件

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 />;
  }
}

相關文章