react-router学习笔记-路由的使用方法

我们公司用的是react-router5.0，查了一些资料其实和react-router4.0相差其实并不是很多，而且5.0的文档目前来看，很少，可能还不完善的吧，所以，这里着重介绍4.0的相关用法

首先react-router需要引入 react-router-dom这个包， 它和react-router这个包其实相差一个link标签，所以，我们常用react-router-dom这个包

安装: npm install --save react-router-dom

引入方式：

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

使用方式：

     <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about?a=12">About</Link>
              </li>
            </ul>
          </nav>

          <Route path='/' exact component={Home}></Route>
          <Route path='/about' component={About}></Route>
        </div>
      </Router>

这里需要说明一下就是，这里的Router 这个分为两种 BrowserRouter 和HashRouter，有些教程直接使用Router，但是在我本地好像是无法生效的，也可能是版本更迭的问题，这里如果你使用的是4.0以上版本的，最好还是要带上 BrowserRouter as Router这句，如果你是服务端渲染的最好使用BrowserRouter，如果仅仅只作为静态页，HashRouter是个不错的选择

基础组件就是 Router, Route, Link

Router用于包裹Route，是应用的核心，一个应用基本上只包含一个

Route里面是要显示的相关组件，它分为两种，一种是直接使用Route，如果不给path，则默认展示这个链接到的组件，并且与其它已匹配的组件同时存在

另一种是switch，它里面的组件只存在一个，如果不写path，则默认展示这个组件

这样有一个好处，当存在大量path时候，switch默认渲染第一个匹配的路径，能节省一部分性能，而且当路由之间相互跳转时候，如果路由不存在可以跳转默认页面比如：404

Route组件渲染props有三种方式：component， render（）， children，但是我们最常用的还是component，render

如果你有一个存在的组件，，而且你不想传递一个特定的组件内部变量信息的话，可以直接使用component，

如果你想渲染一个组件需要传递局部变量，可以使用render

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

因为如果你不这样做，会引起期望之外的组件的卸载和重载。

Navigation

路由跳转：

NavLink相比Link多了一些样式调节，作用其实相差不大

另外如果想要重定向，可以使用<Redirect to="/">组件，这个组件如果存在，会默认执行跳转