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

一.嵌套路由：

??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 (
				

					
我是Home的内容
					

						

							

								News
							
							

								Message
							
						
						{/* 注册路由 */}
						
							
							
							
						
					
				
			)
	}
}

二级组件随便写就可以

message

import React, { Component } from 'react'

export default class Message extends Component {
	render() {
		return (
			

				

					

						message001  
					
					

						message002  
					
					

						message003  
					
				
			
		)
	}
}

news

import React, { Component } from 'react'

export default class News extends Component {
	render() {
		return (
			

				
news001
				
news002
				
news003
			
		)
	}
}

二.路由传参：

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参数
????路由链接(携带参数)：详情
????注册路由(声明接收)：
????接收参数：this.props.match.params
2.search参数
????路由链接(携带参数)：详情
????注册路由(无需声明，正常注册即可)：
????接收参数：this.props.location.search
????备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
????路由链接(携带参数)：详情
????注册路由(无需声明，正常注册即可)：
????接收参数：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可以用于解决一些路径错误相关的问题。