关于前端路由的笔记

142 阅读2分钟

向路由组件传递信息三种方式

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去记录。