快速入门

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

  }

}