react 路由、导航、重镜像、传参。。。。witchRouter继承父元素props
一、路由
react也是spa单页面应用
1.安装
npm i react-router-dom --save
2.基本使用
(1)在/src/index.js引入路由模式
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((2)创建几个页面组件，此处省略
(3)在/src/App.js中引入Switch、Route组件和需要展示的页面组件
import React from 'react';
import {
Switch,Route } from 'react-router-dom'//引入需要的路由相关组件
import Home from './Home'//引入页面组件
import Login from './Login'
function App() {
return (
<div className="App">
{
/* Switch相当于vue-router中的router-view */}
<Switch>
{
/* Route是react中的路由配置规则 */}
<Route path="/home" component={
Home }></Route>
<Route path="/login" component={
Login }></Route>
</Switch>
</div>
);
}
export default App;
3.路由模式
BrowserRouter 是history模式
HashRouter是hash模式
在/src/index.js中引入hash模式
import {
HashRouter } from 'react-router-dom'
ReactDOM.render(<HashRouter><App /></HashRouter>,document.getElementById('root'));
4.路由重定向
Redirect
import {
Switch,Route,Redirect } from 'react-router-dom'
<Switch>
{
/* Route是react中的路由配置规格 */}
<Route path="/home" component={
Home }></Route>
<Route path="/login" component={
Login }></Route>
{
/* Redirect是重定向的组件
path属性的值为星号，表示前面所有的路由规则都没有匹配到
to属性的值为具体的某一个路由规则的path属性值
*/}
<Redirect path="*" to="/home"></Redirect>
</Switch>
5.路由导航
(1)内置组件
Link 会生成a标签，需要设置to属性，但是它没有激活状态的类名
NavLink 会生成a标签，需要设置to属性，它有激活状态的类名
引入导航组件
import { Switch,Route,Redirect,Link,NavLink } from 'react-router-dom'
使用导航组件
首页
登录
首页
登录
(2)编程式导航
当使用了react-router-dom路由后，在页面组件的props.history中封装一些可以使用方法，进行页面跳转，其中push、replace、go的用法和vue-router中一样
push
replace
go 需要传递参数，一般写-1，表示回退到上一个页面
goBack 不需要传递参数，直接回退到上一个页面
6.路由嵌套
需要在哪个页面展示不同的内容，就在哪个页面组件中引入Switch、Route来设置路由出口并定义路由规则。
(1)在src/App.js中定义一级路由规则
{/* Route是react中的路由配置规格 */}
(2)在右侧展示的页面组件中定义二级路由规则
import React from 'react'
import {
Switch,Route } from 'react-router-dom'
import Menu from './Menu'//引入左侧菜单组件
//引入需要在右侧展示的页面组件
import Student from '../pages/Student'
import Setting from '../pages/Setting'
import User from '../pages/User'
export default ()=>{
return(
<div className="middle">
<Menu></Menu>
<div className="right">
<Switch>
<Route path="/home/student" component={
Student }></Route>
<Route path="/home/setting" component={
Setting }></Route>
<Route path="/home/user" component={
User }></Route>
</Switch>
</div>
</div>
)
}
7.高阶组件
如果某个组件不是通过路由渲染出来的，在这个组件中是没有路由相关的信息的
withRouter，可以让页面组件的组成部分组件获取对应的路由信息
import React, {
Component } from 'react'
//引入withRouter组件
import {
NavLink,withRouter } from 'react-router-dom'
class Menu extends Component {
logout(){
this.props.history.push('/login')
}
render() {
return (
<div className="menu">
<NavLink to="/home/student">学生管理</NavLink>
<NavLink to="/home/setting">系统设置</NavLink>
<NavLink to="/home/user">个人中心</NavLink>
<button onClick={
()=>this.logout() }>退出</button>
</div>
)
}
}
//使用withRouter组件包含当前组件
export default withRouter(Menu);
8.路由传参
(1)动态路由
第一步：创建一个详情页面
第二步：定义一个动态路由规则
exact 精确匹配，默认是模糊匹配，需要给具体的路由规则添加exact属性设置为精确匹配
第三步：在列表页面通过编程式导航跳转到详情页面
this.props.history.push('/home/student/'+id);
第四步：在详情页面获取动态路由参数
学生编号：{ this.props.match.params.sid }
(2)查询参数
如果路由传递的参数数量不固定时，使用动态路由就不合适了，可以使用查询参数的方式来进行数据的传递。
第一步：定义一个固定的路由规则
第二步：在列表页面通过编程式导航进行页面跳转并传递参数
使用querystring插件
npm i querystring --save
使用querystring插件
import qs from 'querystring'
toInfo(obj){
// this.props.history.push('/home/student/'+id);
this.props.history.push({
pathname:'/home/student/info',
search:"?"+qs.stringify(obj)//qs.stringify把对象转换成字符串
})
}
第三步：在详情页面获取数据
var search = this.props.location.search.substr(1);//把参数中的问号去掉
// querystring parse 把 参数名=参数值&参数名N=参数值N 格式的数据转换成对象
var obj = qs.parse(search);//qs.parse把字符串转换成对象