14react之路由Route

1.安装
npm install react-router-dom --save

2.简单使用
这个是点击跳转的操作：

<Link className="list-group-item" to="/about">About</Link>

这个是展示路由组件的区域：component属性就是放展示的组建的

<Route path="/about" component={About}/>

完整代码展示：

import React, { Component } from 'react'
import {Link,Route,Switch,Redirect} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
export default class App extends Component {
	render() {
		return (
			<div>
				<div className="row">
						{/* 原生html中，靠<a>跳转不同的页面 */}
						{/* <a className="list-group-item" href="./about.html">About</a>
						<a className="list-group-item active" href="./home.html">Home</a> */}

						{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
						<Link className="list-group-item" to="/about">About</Link>
						<Link className="list-group-item" to="/home">Home</Link>
				</div>
					<div >
						{/* 注册路由 */}
						<Switch>
							<Route path="/about" component={About}/>
							<Route path="/home" component={Home}/>
							<Redirect to="/about"/>
						</Switch>
					</div>
			</div>
		)
	}
}

3.路由传递参数
1).向路由组件传递params参数

//点击的地方
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>跳转路由</Link>
//路由组件占用空间的地方
<Route path="/home/message/detail/:id/:title" component={Detail}/>

路由组件接收参数：

const {id,title} = this.props.match.params

2）.向路由组件传递search参数

//点击的地方
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>跳转路由</Link>
//路由组件占用空间的地方
{/* search参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail}/>

路由组件接收：

//qs是个插件(npm i qs)，因为获取到的参数是id=123?title=aaa这种类型，想要拆分开，并且转成对象形式，简单的办法就是用qs方法直接转
import qs from 'querystring'
const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))

3).向路由组件传递state参数

//点击的地方
<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>跳转路由</Link>

//路由组件占用空间的地方
{/* state参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail}/>

接收参数：

// 接收state参数
const {id,title} = this.props.location.state || {}

4.路由的replace和push

1）.push: a-b-c 可以回到上一级
js中调用方法：

this.props.history.push('路由地址')

Link标签中默认就是push方法：

<Link to="/about">About</Link>

2).replace: a-b-c 回不到上一级 适用于登录后，不需要重新回到登页面
js中调用方法：

this.props.history.replace('路由地址')

Link标签中使用方法：

<Link replace to="/about">About</Link>

5.路由回退

1.往后返回到之前的页面

this.props.history.goBack(); 

2.A跳转到B页面，然后B用goBack回到了A页面，再想回到B页面就用goForward

this.props.history.goForward();

3.回退几次

this.props.history.go(-2)