[学习]React——路由的相关使用

路由组件与一般组件

接收到的props不同：
    一般组件：写组件标签时传递了什么，就能收到什么
    路由组件：接收到三个固定的属性
        history:
            go: f go(n)
            goBack: f goBack()
            goForward: f goForWard()
            push: f push(path,state)
            replace: f replace(path,state)
        location:
            pathname:""
            search:""
            state:
        match:
            isExact:true
            params:{}
            path:"/about"
            url:"/about"

封装NavLink组件

import React, {Component} from 'react';
import {NavLink} from "react-router-dom";

class MyNavLink extends Component {
    render() {
        return (
            
        );
    }
}

export default MyNavLink;

路由使用MyNavLink可以自定义css样式

 

      

          {/*原神html中，依靠标签跳转不同的页面*/}
          {/* About
           Home*/}
            {/*在React中靠路由链接来跳转组件*/}
         About
      
 

路由传参

1.params参数
    ①向路由组件传递params参数
        {msgObj.name}
    ②声明接收params
        
    ③接收参数
        this.props.match.params
2.search参数
    ①向路由组件传递search参数
        {msgObj.name}
    ②search参数无需声明接收
        
    ③接收参数
        引入 ： import qs from "querystring"
        取出 ： this.props.locations.search
        解析 ： const result = qs.parse(search)
3.state参数
    ①向路由组件传递state参数
        {msgObj.name}
    ②state参数无需声明接收
        
    ③接收参数
        this.props.locations.state

replace与push-->路由跳转

1.push是默认的跳转模式，会留下历史记录，可以进行回退
2.replace不会留下历史记录，不可以进行回退

     this.shoeReplace(msgObj.id,msgObj.name)}>Replace
   //编写一段代码，让其实现跳转到Detail组件，且为replace跳转
    showReplace = (id,name) =>{
        this.props.history.replace("/home/message/detail/${id}/${name}")
    }
3.go、goBack、
    this.props.history.go(1)前进一
    this.props.history.go(-1)后退一
    this.props.history.goBack()后退一

为一般组件添加路由属性

withRouter可以加工一般组件，让一般组件可以使用路由组件的API
1.引入 import {withRouter} from "react-router-dom"
2. 使用 export default withRouter（App）;