Guide-2019-05-09-React Router 4.

react-router中有三类组件：

• 路由组件（router components）
• 路由匹配组件（route matching components）
• 导航组件（navigation components.）
  上面三类组件都需要从react-router-dom中import导入

Routers

每个react-router应用的核心应该是router组件
对于web项目，react-router-dom提供来两种路由方式： <BrowserRouter> 和<HashRouter>
这两种路由都为你提供了特有的history对象
一般来说，如果你有响应请求的服务器，就应该使用<BrowserRouter>
如果你使用静态文件服务，就应该使用<HashRouter>

{* 表示使用BrowserRouter模式来使用Router *}
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
  <Router>
    <App />
  </Router>
  holder
);

Route matching

有两种路由匹配组件：<Route>和<Switch>

Route

通过比较<Route>组件的path属性与当前location的pathname来进行路由匹配，如果匹配成功，那就会在<Route>组件这个地方渲染component属性的组件内容；如果没有匹配成功，会渲染null。
如果<Route>组件没有path属性，将始终匹配，也就是始终会渲染指定的内容。
比如： <Route component={Always}/> // renders <Always/>

(`location的pathname` 是指url地址域名后面的所有字符，
比如https://www.jianshu.com/writer, location.pathname == '/writer')

<Route />组件不能嵌套

Switch

我们不一定要用Switch来对<Route/>进行分组，但是Switch很有用。
<Switch>将迭代其所有子<Route>元素，并仅渲染与当前路由匹配的第一个子元素
当多个<Route>的路径匹配相同的路径名，动画路由之间的转换，以及识别何时没有路径与当前路由匹配时（这样您可以渲染“404”组件），这会有所帮助。

import { Route, Switch } from "react-router-dom";

<Route path='/about' component={About}/>          {* renders <About/> *}
<Route path='/contact' component={Contact}/>      {* renders null*}
<Route component={Always}/>                       {* renders <Always/>*}

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  {/* when none of the above match, <NoMatch> will be rendered */}
  <Route component={NoMatch} />
</Switch>

Route Rendering props

使用<Route />组件渲染其他组件，你可以有三个属性可以设置渲染的组件：component, render, children
可阅读API->Route查阅详细信息
这里只关注component和render,因为它们会被经常使用。
component属性：用来渲染已经存在的组件(不管是从React.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

其实就是通过<Link></Link>标签对包裹元素，进行导航。
该标签会被渲染为<a>标签
<NavLink>标签是一种特殊的<Link>标签，当路由匹配时，它会加上‘active’类

如果你想强制导航，使用<Redirect />

<Link to="/">Home</Link>
// <a href='/'>Home</a>

<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>

<Redirect to="/login" />