react-router

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 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

react-router

1.React Router 中有三类组件

Routes 组件

Route Matching 组件（Route，Switch）

navigation 组件（Link/NavLink）