路由

React路由需要借助react-router-dom

基础用法

1、引入：import {BrowserRouter,NavLink,Route,Switch,Redirect} from 'react-router-dom'
2、去index.js把App包裹起来
<BrowserRouter>
<App />
</BrowserRouter>
3、注册路由：
<MYNavLink to="/about">About</MYNavLink>
<MYNavLink to="/home">Home</MYNavLink>
（这里的MYNavLink是对NavLink的封装，包裹了一些类名）
4、匹配路由
<Switch>
{/* 注册路由 默认的是模糊匹配 ，要开启精准(exact)匹配，需要加上exact /}
<Route path='/about' component={About}/>
<Route path='/home' component={Home}/>
<Redirect to='/home'/>
{/如果前面的都没有匹配上，就重定向到redirect指定的路径 */}
</Switch>

嵌套路由

需要把多级的路由都写出来，而且上级路由要用模糊匹配，如
<Route path='/about/msg1' component={msg1}/>

向路由组件传参

params传参

<Link to={`/home/msg/${obj.id}/${obj.title}`}>{obj.title}</Link>

<Route path="/home/msg/:id/:title" component={detail}>

然后再detail组件的this.props.match.params里就可以取到包含了id和title属性的数据对象

传递search参数

<Link to={`/home/msg/?id=${obj.id}&title=${obj.title}`}>{obj.title}</Link>
<Route path="/home/msg" component={detail}> 无需显示的声明接受，正常注册即可
在detail组件的this.props.location.search里面，但是，没有自动整理成对象的形式
不过react脚手架为我们提供了一个库可以帮忙做这件事

import qs from "querystring"
var obj = {a:1, b: 2}
qs.stringify(obj) // a=1&b=2
let str = 'name=zhangsan&age=18'
qs.parse(str) // {name:'zhangsan', age: 18}

state 参数（不会把传递的东西在地址栏里展示出来）

<Link to={{pathname:"/home/msg", state:{id: obj.id, title:obj.title}}}>{obj.title}</Link>
<Route path="/home/msg" component={detail}> 无需显示的声明接受，正常注册即可
使用：
this.props.location.state 已经整理好成一个对象了

关于浏览痕迹

在react中，组件的导航用的是push模式，是会留下痕迹的，可以回退。如果我们想用replace模式让它不留痕迹呢怎么办呢？给路由链接加上属性replace={true}

编程式路由导航

去主动的调用this.props.history.push(或是replace)来实现路由跳转

去主动的调用this.props.history.goBack或者是goForward来实现后退或前进
this.props.history.go() 接受一个数值作为参数表示要前进几步，传入负数表示后退多少步

withRouter

在react中，只有路由组件的props里才有history，可是如果我们的需求是想在一般组件里定义一些button来实现back和forward呢 ？

暴露一般组件时，
export default withRouter(componentName)
withRouter是react-router-dom里面的一个函数，它接受一个一般组件，然后给它加上路由组件所拥有的特殊的东西

HashRouter和BrowersRouter的对比

1、兼容性，HashRouter更好，应该BrowersRouter是对H5的History的再封装
2、path上HashRouter多一个#
3、HashRouter刷新后路由参数的state会丢失，BrowserRouter却不会，因为它以及操作在了props.location的state里
4、HashRouter有时候可以解决一些路径错误的问题