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(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root'));

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

使用导航组件

<Link to="/home">首页</Link>
<Link to="/login">登录</Link>
<hr/>
<NavLink to="/home">首页</NavLink>
<NavLink to="/login">登录</NavLink>

(2)编程式导航

当使用了react-router-dom路由后，在页面组件的props.history中封装一些可以使用方法，进行页面跳转，其中push、replace、go的用法和vue-router中一样

push

replace

go 需要传递参数，一般写-1，表示回退到上一个页面

goBack 不需要传递参数，直接回退到上一个页面

6.路由嵌套

需要在哪个页面展示不同的内容，就在哪个页面组件中引入Switch、Route来设置路由出口并定义路由规则。

(1)在src/App.js中定义一级路由规则

<Switch>
    {/* Route是react中的路由配置规格 */}
    <Route path="/home" component={ Home }></Route>
    <Route path="/login" component={ Login }></Route>
    <Redirect path="*" to="/home"></Redirect>
</Switch>

(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属性设置为精确匹配

<Route exact path="/home/student" component={ Student }></Route>
<Route path="/home/student/:sid" component={ StudentInfo }></Route>

第三步：在列表页面通过编程式导航跳转到详情页面

this.props.history.push('/home/student/'+id);

第四步：在详情页面获取动态路由参数

<p>学生编号：{ this.props.match.params.sid }</p>

(2)查询参数

如果路由传递的参数数量不固定时，使用动态路由就不合适了，可以使用查询参数的方式来进行数据的传递。

第一步：定义一个固定的路由规则

<Route path="/home/student/info" component={ StudentInfo }></Route>

第二步：在列表页面通过编程式导航进行页面跳转并传递参数

使用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把字符串转换成对象