react-router

引入react-router-dom;

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

class App extends Component {
  render() {
    return (
      <Router>
        <Layout>
          <Switch> 
            <Route exact path="/" component={Home}/>
            <Redirect from="*" to="/"/>
          </Switch>
        </Layout>
      </Router>
    );
  }
}

<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。
<HashRouter> 使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。
path为路由路径
component为渲染的组件
Redirect如果匹配不到上面的路径就全部跳转到“/”
如果不用Switch包裹就会一个一个匹配使用Switch只会匹配到第一个

<BrowserRouter basename="/calendar">
  <Link to="/today" />
</BrowserRouter>

<Link to="/today" />会被解析为<a href="/calendar/today" />

<HashRouter basename="/calendar">
  <Link to="/today" />
</HashRouter>

<Link to="/today" />会被解析为<a href="#/calendar/today" />