react-router 4.x

什么时候使用react-router

当我们的项目存在多个页面的时候，我们可以使用像<a/>标签这样来跳转，但是提供react-router给了我们更好的选择。

react-router是什么

由于在react中，我们使用的都是组件，于是react-router也采用了这种方式，所以react-router其实提供给我们使用的都是以组件形式存在的。我们使用的时候就像我们以前使用组件那样使用就行了。如果想详细了解请参考官方文档，写的很好，建议可以看一下react-router官方文档

react-router安装

我们使用的所有的react-router组件都应该来自这个库

npm install react-router-dom

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

react-router基本组件

Routers(路由器组件<BrowserRouter>和<HashRouter>)

我们app的最外层必须包含一个Router,Router包括<BrowserRouter>和<HashRouter>，在web开发中，我们使用前者。而且它会为组件注入history，正是有history，才能进行一系列的路由操作，并且一个Router下面只能包含一个子节点，基于这个原因我们可以在下面使用一层<div>.像下面这样

ReactDOM.Render(
    <BrowserRouter>
        <div>
            // 在这里面写我们接下来的代码
        </div>
    </BrowserRouter>，
    document.getElementById('id')
)

路由匹配(<Route> 和 <Switch>)

我们可以在我们app的任何地方使用<Route>，一般我们使用它的path和component属性，路由匹配的原理是比较<Route>的path属性和当前的location的pathname，如果路由匹配该<Route>组件那么就展示它指定的组件，如果不给<Route>的path属性，那么默认是会渲染它指定组件。我们常常可以看到，在一个页面中有很多<Route>组件，根据不同的路由来展示不同的部分，像下面这样。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

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

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

export default BasicExample;

而<Switch>是拿来对<Route>分组的,渲染的时候它会遍历内部的<Route>,直到匹配到第一个匹配的<Route>,一般在<Switch>最后加上一个所有路由不匹配时展示的页面，常见的就是404。例如上面的例子中我们可以改成这个样子

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />
      <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route component={Default} />
      </Switch>
    </div>
  </Router>
);

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

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Default= () => (
  <div>
    <h2>404</h2>
  </div>
);
export default BasicExample;

导航组件(<Link>和 <Redirect> 和 <NavLink>)

<Link>就像<a/>标签，<NavLink>和前面的<Link>差不多, 都可以实现跳转页面，而<Redirect>就是实现重定向,只要匹配到它的from属性，就跳转到它的to属性指定的路由,常见的就是实现登陆的时候的重定向。