一、react-router简单介绍

1.react-router的理解

1. react的一个插件库。
2. 专门用来实现一个SPA应用。
3. 基于react的项目基本都会用到此库。

2.react-router相关API

内置组件

1. <BrowserRouter>
2. <HashRouter>
3. <Route>
4. <Redirect>: 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到 `Redirect` 指定的路由
5. <Link>
6. <NavLink>
7. <Switch>:Switch可以提高路由匹配效率(单一匹配)

其他

1.history对象
2.match对象
3.withRouter函数

二、一般组件和路由组件

一般组件和路由组件区别

写法不同
一般组件: <Demo />
路由组件: <Route path="/demo" component={Demo} />

存放位置不同
一般组件: components
路由组件: pages

接收到的props不同
一般组件: 通过组件标签属性, 传什么就接收什么, 不传就没有
路由组件: 接收到三个固定的属性

路由组件: 接收到三个固定的属性

history:
    go: ƒ go(n)
    goBack: ƒ goBack()
    goForward: ƒ goForward()
    push: ƒ push(path, state)
    replace: ƒ replace(path, state)

location:
    pathname: "/home"
    search: ""
    state: undefined

match:
    params: {}
    path: "/home"
    url: "/home"

向路由组件传递参数

1.向路由组件传递params参数

路由链接(携带参数)：

<Link to='/demo/test/tom/18'}>详情</Link>

注册路由(声明接收)：

<Route path="/demo/test/:name/:age" component={Test}/>

接收参数：

this.props.match.params

2.向路由组件传递search参数

路由链接(携带参数)：

<Link to='/demo?id=001&title=消息1'}>详情</Link>

注册路由(无需声明，正常注册即可)：

<Route path="/demo" component={Demo}/>

接收参数：

this.props.location.search

注意：获取到的 search 是 urlencoded 编码字符串，需要借助 querystring 解析

3.向路由组件传递state参数

路由链接(携带参数)：

<Link to={ {pathname: '/demo', state: {id: '001', titile: '消息1'}} }>详情</Link>

注册路由(无需声明，正常注册即可)：

<Route path="/demo" component={Demo}/>

接收参数：

let {id, title} = this.props.location.state

注意：刷新 页面, 传递的参数还是可以正常传递的

withRouter的使用

import { withRouter } from 'react-router-dom'
...
export default withRouter(Hearder);

1.withRouter 可以加工一般组件, 让一般组件具备路由组件所特有API
2. withRouter 是一个函数, 接收一个一般组件, 返回值一个加工后的新组件, 这个新组件具备路由组件的一些特性

BrowserRouter与HashRouter的区别

1.底层原理不一样：

BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。

HashRouter使用的是URL的哈希值。

2.path表现形式不一样

BrowserRouter的路径中没有#,例如：localhost:3000/demo/test

HashRouter的路径包含#,例如：localhost:3000/#/demo/test

3.刷新后对路由state参数的影响

BrowserRouter没有任何影响，因为state保存在history对象中。

HashRouter刷新后会导致路由state参数的丢失！！！

4.备注：

HashRouter可以用于解决一些路径错误相关的问题。