向路由组件传递信息三种方式
params方式携带参数
// 点击跳转时,顺便给路由携带参数
<Link to='/home/333'></Link>
// 路由声明我要接受这个参数
<Route path="/home/:id" component={Home}></Route>
// 路由里使用参数
this.props.match.params
search方式携带参数
// 给路由携带参数
<Link to='home/?id=1&title=222'></Link>
// 路由不需要声明接收
<Route path='/home' component={Home}></Route>
// 使用参数
通过this.props.location.search获取`?id=1&title=222`
但是要把它解析成对象之后才能用,可以使用react脚手架自带的库--querystring
queryString里面有两个方法--stringify和parse
可以将字符串和urlEncoded对象进行互相解析。
state携带参数(地址栏上没有参数提示)
// 使用state对象向路由组件传递参数
<Link to={{pathname:'/home',state:{id:1,title:222}}}></Link>
<Route path='/home' component={Home}></Route>
// 获取路由参数
this.props.location.state
注意:刷新不丢失参数,因为保存在BOM中的history对象上,可以保留历史记录。
但是删除浏览器缓存,就会丢失掉state对象。
push replace
相当于一个栈,默认是使用push向栈里push一个访问记录路由。
replace是替换栈顶的一个历史记录。
编程式路由导航
用js的方式实现路由跳转。
前置知识:路由组件中this.props会有额外的三个属性,history/location/match
我们如果想通过js方式操作路由,可以利用this.props.history里面的push和replace方法(goBack、goForward、go)
当然,push(path,state)和replace(path,state)也支持state路由传参方式
用js实现的路由传参应该与route声明接受不了参数的方式保持一致。
withRouter
需求:普通组件如果要使用js路由跳转,但是props中没有history可以使用。
withRouter
可以让一般组件拥有路由组件特有的props中的三个history属性。
我们就可以在一般组件中使用js进行路由跳转。
HashRouter和BrowerRouter的区别
BrowerRouter利用H5中的history对象,所以可以使用历史记录。(实际上是react对history对象的封装)
HashRouter是利用URL上的hash参数,也就是锚点,触发window.onhashchange事件,进而可以改变路由。
区别:
1.写法不一样
2.底层本质逻辑不一样
3.state方式传递参数时,hash路由刷新会报错,因为哈希路由底层没有用history去记录。