react-router 和 @reach/router

react-router

1、基本用法

 npm install -S react-router  // 安装

Router组件本身只是一个容器，真正的路由要通过Route组件定义。

import {
    Router, Route, hashHistory } from 'react-router';
render((
  <Router history={
   hashHistory}>
    <Route path="/app" component={
   App}/>  //访问根路由'/app'，组件APP就会加载到document.getElementById('app')。
  </Router>
), document.getElementById('app'));

Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。

<Router history={
   hashHistory}>
  <Route path="/" component={
   App}/>
  <Route path="/repos" component={
   Repos}/>
  <Route path="/about" component={
   About}/>
</Router>

2、嵌套路由、path、通配符
Route可以嵌套使用。
path属性指定路由的匹配规则。

<Router history={
   hashHistory}>
  <Route path="/user" component={
   App}>
    <Route path="/repos" component={
   Repos}/>
    <Route path="/about" component={
   A