1.React Router 中有三类组件

• Routes 组件

• Route Matching 组件（Route，Switch）

• navigation 组件（Link/NavLink）

1.1 Routers

基于 React Router 的 web 应用，根组件应该是一个 Router 组件（BrowserRouter，HashRouter）。

import {BrowserRouter , HashRouter} from 'react-router-dom'

项目中，两种路由都会创建一个 history 对象。

• 如果加载服务器响应 web 的请求，使用<BrowserRouter>组件;
  • 使用浏览器 History API 处理 URL
  • 斜杠来表示路由
  • example.com/user/abc
  • 官方推荐使用的方式
• 如果加载静态文件服务器，使用<HashRouter>组件
  • 使用 URL 中的 hash（#）部分
  • "#"后面的部分来表示路由
  • example.com/#/some/path
  • 用于兼容低版本浏览器
• 区别
  • HashRouter不支持location属性

1.2 Route Matching(路由匹配)

react 中提供了两种路由匹配组件，它们分别是：<Route> 和 <Switch>.

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

• Route

  路由匹配通过比较<Route>组件的 PATH 属性和本地路径的 pathname 来完成工作。当一个 <Route> 匹配到对应路径，他会渲染(render) 对应路径的内容
  当它没有匹配到对应路径是，会渲染 null。 一个没有提供 path 属性的<Route> 将始终被渲染

     <Router>
        <ul>
          <li>
            <Link to="/Router_Switch/home">Home</Link>
          </li>
          <li>
            <Link to="/Router_Switch/about">About</Link>
          </li>
          <li>
            <Link to="/Router_Switch/mj">User</Link>
          </li>
        </ul>
        <Route exact path="/Router_Switch/">
          {/* 
          当路径名为'/'时, path不匹配
          当路径名为'/Router_Switch'或'/Router_Switch/about'时, path匹配
          当你只想匹配'/Router_Switch'时，需要使用"exact"参数
          */}
          <Home />
        </Route>
        <Route exact path="/Router_Switch/about/">
          <About />
        </Route>
      </Router>
  

• Switch

  根据位置渲染的内容中去包含<Route> 组件。

  列出并排列多个可能的<Route>组件

  • <Switch> 组件会遍历所有<Route>元素，并且只渲染最先与本地路径相匹配的<Route>元素
  • <Switch> 对于组合<Route> 并不是必须的
  • 保证下面的 route，即使有多个与路径匹配，也只有第一个会显示
  • Switch是永远只会匹配一个, Route 则不一定,符合条件就会匹配到

<Switch>
        <Route path="/Router_Switch/home">
          <Home />
        </Route>
        <Route path="/Router_Switch/about">
          <About />
        </Route>
        <Route path="/Router_Switch/:user">
          <User />
        </Route>
 </Switch>

1.3 路由渲染参数

最为常用的为 component , render , children方法

• component 作用于你想要渲染的已经存在的组件(可以是 react.component ，也可以是无状态组件(pure function)）。
• render 方法提供一个内部函数，当想要对将被渲染的组件传入内部变量的时候，需要使用这个方法。
• 不应该对 component 方法传入内部变量，因为 component 会有两个多余的方法 unmounts / remounts。

2.1 导航

<link>

<Link to="/">Home</Link>

<NavLink>

<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>

区别:

NavLink比Link多出两个属性:

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}>
  FAQs
</NavLink>

2.2参数传递

• 通配符传参

//方式一:
<Route path="/params/page1/:page?" component={Page1} />
 <Link to="/params/page1/?page=1">page1</Link>
</Route>

//方式二:
<Route path="/params/page2" component={Page2} />
 <Link
         to={{
              pathname: "/params/page2",
              search: "?page=2"
              }}>
       page2
 </Link>
</Route>

//参数获取:
this.props.location

• state传参

let data = { id: 123, name: "Mj", age: 18 };
    let path = {
        pathname: "/detail",
        query: data
    };

<Link to={path1}>go detaiil</Link>

//参数获取:
this.props.location.query

state参数保存位置

进入页面打开控制台输入history,state为null

20200121170526.png

点击go state 参数传递过去之后:
再次输入history , 里面有我们传递的参数

20200121170618.png

react-router官网:
https://reacttraining.com/react-router/web/api/NavLink/activestyle-object