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

快速入門

安裝：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 />;
  }
}