（十四）二级路由_嵌套路由路由传递参数（第二篇）

一.嵌套路由：

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>&nbsp;&nbsp;
					</li>
					<li>
						<a href="/message2">message002</a>&nbsp;&nbsp;
					</li>
					<li>
						<a href="/message/3">message003</a>&nbsp;&nbsp;
					</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可以用于解决一些路径错误相关的问题。

咫尺远近却无法靠近的那个你，才敢让你发觉你并不孤寂

（十四）二级路由_嵌套路由 路由传递参数 （第二篇）