react路由传参和跳转

向路由组件传递参数数据

向路由组件传递params参数

{/* 向路由组件传递params参数 */}
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
{/* 声明接收params参数 */}
<Route path="/home/message/detail/:id/:title" component={Detail}/>
// 接收params参数
const {id,title} = this.props.match.params

向路由组件传递search参数

{/* 向路由组件传递search参数 */}
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
{/* search参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail}/>
// 接收search参数
import qs from 'querystring'
const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))

向路由组件传递state参数

{/* 向路由组件传递state参数 */}
<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
{/* state参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail}/>
// 接收state参数
const {id,title} = this.props.location.state || {}

多种路由跳转方式

//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跳转+携带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})

普通组件中使用路由跳转

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

class Header extends Component {

	back = ()=>{
		this.props.history.goBack()
	}

	forward = ()=>{
		this.props.history.goForward()
	}

	go = ()=>{
		this.props.history.go(-2)
	}

	render() {
		console.log('Header组件收到的props是',this.props);
		return (
			<div className="page-header">
				<h2>React Router Demo</h2>
				<button onClick={this.back}>回退</button>&nbsp;
				<button onClick={this.forward}>前进</button>&nbsp;
				<button onClick={this.go}>go</button>
			</div>
		)
	}
}

export default withRouter(Header)

//withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
//withRouter的返回值是一个新组件

BrowserRouter与HashRouter的区别

底层原理不一样：

• BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
• HashRouter使用的是URL的哈希值。

path表现形式不一样

• BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
• HashRouter的路径包含#,例如：localhost:3000/#/demo/test

刷新后对路由state参数的影响

• (1).BrowserRouter没有任何影响，因为state保存在history对象中。
• (2).HashRouter刷新后会导致路由state参数的丢失！！！

备注：HashRouter可以用于解决一些路径错误相关的问题。