路由3种传参方式 + 两种导航 + BrowserRouter与HashRouter的区别

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/test?name=tom&age=18'}>详情</Link>

注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>

===========================================
接收参数：this.props.location.search
// 接收search参数
import qs from 'querystring'
const {search} = this.props.location
const {id, title} = qs.parse(search.slice(1))

备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
用法：
let obj = {name: 'tom', age: 18}
// name=tom&age=18  key=value&key=value (urlencoded)
console.log(qs.stringify((obj)));

let str = 'cartName=奔驰&price=199'
// {cartName: "奔驰", price: "199"}
console.log(qs.parse(str));

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

路由链接(携带参数)：
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Test}/>

=====================================================

接收参数：this.props.location.state
备注：刷新也可以保留住参数(hash路由刷新参数会丢失)

声明式导航

利用组件(Link或NavLink)属性实现路由跳转

  <Link to="/home" />

编程式导航

> 利用路由提供的history对象实现路由跳转
history.push(path|Object)
history.replace(path|Object)

search:
     history.push({
	pathname:'/list',
	search:'?page=2'
     })

BrowserRouter与HashRouter的区别

1.底层原理不一样：
    BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
    HashRouter使用的是URL的哈希值。
2.path表现形式不一样
    BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
    HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
    (1).BrowserRouter没有任何影响，因为state保存在history对象中。
    (2).HashRouter刷新后会导致路由state参数的丢失！！！
4.备注：HashRouter可以用于解决一些路径错误相关的问题