react-router官网入口

1.路由的基本使用

按需引入：

import {BrowserRouter/HashRouter(一般直接包在app组件外面)， Link(进行路由跳转)， Route(进行路由展示)} from 'react-router-dom'

//路由跳转
<Link className='XX' to="/XX">XXX</Link>     
//注册路由
<Route path='/XX' component={XXX}

2.link和NavLink的使用

Link进行路由跳转

<Link className='XX' to="/XX">XXX</Link>

NavLink进行路由跳转时，当它与当前 URL 匹配时，它将向呈现的元素添加样式属性。

<NavLink activeClassName='xxxx' className='XX' to="/XX">XXX</NavLink>

3.路由重定向

渲染一个<Redirect>将导航到一个新位置。新位置将覆盖历史堆栈中的当前位置，就像服务器端重定向 (HTTP 3xx) 一样。

<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

4.Switch

渲染第一个孩子或与该位置匹配的孩子。

<Switch>
     <Route path='/xxx' component={xxx} />
     <Route path='/xxx' component={xxx} />
     <Route path='/xxx' component={xxx} />
</Switch>

5.路由的模糊匹配和严格匹配

的一个属性，如果为 true，则只有在路径完全匹配 location.pathname 时才匹配

默认使用的是模糊匹配（输入的路径必须包含匹配的路径且开头一样

<Switch>
      <Route exact path='/xxx' component={xxx} />
      <Route exact path='/xxx' component={xxx} />
</Switch>

6.嵌套路由

和一级路由写法类似，在二级路由以同样的方法嵌套路由

7.路由传参

1.params传参：

路由链接（携带参数）：<Link to="/demo/test/tom/18">详情<Link/>

注册路由（声明接收）：<Route path="/demo/test/:name/:age" component={Test} />
接收参数：const {name, age} = this.props.match.params

2.search传参：

路由链接（携带参数）：<Link to="/demo/test/?name=tom&age=18">详情<Link/>
注册路由（无需接收）：<Route path="/demo/test" component={Test} />
接收参数：const { search } = this.props.location
备注：获取到的seach是urlencoded编码字符串，需要借助query-string库使用（安装使用）

3.state传参：

路由链接（携带参数）：<Link to={{pathname:"/demo/test",state:{name:"tom",age:"18"}}}>详情<Link/>
注册路由（无需接收）：<Route path="/demo/test" component={Test} />
接收参数：const { search } = this.props.location.state
备注：参数不会在地址栏里面显示出来

8.编程式路由导航

借助this.props.history下面的API进行跳转:go()、push()、replace()、goBack()、goForward()

9.withRouter的使用

您可以通过高阶组件访问history对象的属性和最接近的属性<Route>。每当渲染时，都会将 updated 、和props 传递给包装的组件。

import { withRouter } from 'react-router-dom'
....
export default withRouter(Header)
// 1.withRouter可以加工一般组件，让一般组件具备路由组件特有的API
// 2.withRouter的返回值是一个新的组件

React知识点总结（2）react-router@5