官方文档读到这里，大概明白了React-router是专门为单页面设计的，，我只能说多页面格外的不方便

首先这个是基本的套路

import React from 'react'

import React from 'react-dom'

import {

  BrowserRouter as Router,

  Route,   // 这是基本的路由块

  Link,    // 这是a标签

  Switch   // 这是监听空路由的

  Redirect // 这是重定向

  Prompt   // 防止转换

} from 'react-router-dom'

// 模板，套路

const CustomLinkExample = () => (

 <Router>

    <div>

      <ul>

        <li><Link to="/">Form</Link></li>

        <li><Link to="/one">One</Link></li>

        <li><Link to="/two">Two</Link></li>

      </ul>

      <Route path="/" exact component={Form}/>

      <Route path="/one" render={() => <h3>One</h3>}/>  // 路由跳转

      <Route path="/two" render={() => <h3>Two</h3>}/>

      <PrivateRoute path="/protected" component={Protected}/> // 重定向

      <Switch>  // 监听空路由，

        <Route path="/" exact component={Home}/>

        <Redirect from="/old-match" to="/will-match"/>

        <Route path="/will-match" component={WillMatch}/>

        <Route component={NoMatch}/>  // 空路由，

      </Switch>

      <Prompt  // 防止转换 通常是在表单输入时使用

          when={isBlocking}  // 是否开启防止转换

          message={location => (  // 这是说明

            `Are you sure you want to go to ${location.pathname}`

          )}

        />

ReactDOM.render(

	<CustomLinkExample />,

	document.getElementById("app")

)