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

使用导航组件

首页
登录

首页 登录

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

你可能感兴趣的:(react)