（十四）二级路由_嵌套路由 路由传递参数 （第二篇）
（十四）二级路由_嵌套路由 路由传递参数 （第二篇）
一.嵌套路由：
1)注册子路由时要写上父路由的path值
2)路由的匹配是按照注册路由的顺序进行的
举例子：
创建home组件 ,里面有两个导航栏 ,设置一个展示区进行展示二级的组件（home本身也是作为一个组件展示的）
创建二级组件 news ， message 。路径要写上父路径
import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {Route,Switch,Redirect} from 'react-router-dom'
import News from './News'
import Message from './Message'
export default class Home extends Component {
render() {
return (
<div>
<h3>我是Home的内容</h3>
<div>
<ul className="nav nav-tabs">
<li>
<MyNavLink to="/home/news">News</MyNavLink>
</li>
<li>
<MyNavLink to="/home/message">Message</MyNavLink>
</li>
</ul>
{/* 注册路由 */}
<Switch>
<Route path="/home/news" component={News}/>
<Route path="/home/message" component={Message}/>
<Redirect to="/home/news"/>
</Switch>
</div>
</div>
)
}
}
二级组件随便写就可以
message
import React, { Component } from 'react'
export default class Message extends Component {
render() {
return (
<div>
<ul>
<li>
<a href="/message1">message001</a>
</li>
<li>
<a href="/message2">message002</a>
</li>
<li>
<a href="/message/3">message003</a>
</li>
</ul>
</div>
)
}
}
news
import React, { Component } from 'react'
export default class News extends Component {
render() {
return (
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
)
}
}
二.路由传参：
qs库的使用
qs库的使用方法
import qs from ' querystring '
let obj = {name:'tom',age:'18'}
console.log(qs.stringfy(obj)) 转成Ucode形式 // name=tom&age=18
字符串形式的ucode转成对象形式
let str = 'carName=奔驰&price=199'
console.log(qs.parse(str))) 就是对象形式了
声明式传参跳转
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是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.state
备注：刷新也可以保留住参数
replace : 在跳转的时候写上 replace 就会进行替换操作（就是跳转之后没有后退的记录）
编程式跳转且传参数
替换跳转
replaceShow = (id,title)=>{
//replace跳转+携带params参数
this.props.history.replace(`/home/message/detail/${id}/${title}`)
//replace跳转+携带search参数
this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
//replace跳转+携带state参数
this.props.history.replace(`/home/message/detail`,{id,title})
}
push跳转
pushShow = (id,title)=>{
//push跳转+携带params参数
this.props.history.push(`/home/message/detail/${id}/${title}`)
//push跳转+携带search参数
this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
//push跳转+携带state参数
this.props.history.push(`/home/message/detail`,{id,title})
}
编程式前进后退的方法：（使用props的对象）
this.props.history.goBack()
this.props.history.goForward()
this.props.history.go(2) 里面传的是具体的数值 进行相应的跳转
三.注意：一般组件是没有props的，解决方案 “withRouter”
在使用是时候，只有路由组件才有相应的props 一般组建时没有的，但是想在一般组件里面进行操作的时候，就需要使用withRouter进行操作
withRouter可以加工一般组件， 让一般组件具备路由组件所特有的API
withRouter的返回值是一个新的组件
import {withRouter} from 'react-dom-rom'
class Header extends Componment {
}
export default withRouter(Header)
这样就可以在 props里面接收到相应的参数
四.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可以用于解决一些路径错误相关的问题。
