简述: 

　   1. react-router v6 原生支持typeScript ; 安装方法 npm install react-router-dom@6

　   2. react-router v5 原生不支持typeScript,  需要安装 @types/react-router-dom 来支持ts ;  安装方法  npm install react-router-dom@5

　   3. react-router v5 路由配置 :　 +  +

　   4. react-router v6 路由配置 :    +  +

　   5. react-router v5和react-router v6区别:  官方文档 v5=>v6的变化

常规简单路由配置Demo图:

　　1. react-router v5:   

　　　　 通过props注入来获取路由状态;   

　　　　 类组件: (HOC高阶组件) withRouter==>history, location, match;    可以使任意组件都具备这些属性

　　　　 函数式组件:  useHistory, useLocation, useParams, useRouteMatch  来搞定

　　2. react-router v6: 

　　　　 因为完全倒向函数式组件;  直接用 hooks就行,useLocation,useParams;    注意 useHistory改成了 useNavigate

拓展: 

 一 . react-router v5: 三种常用的跳转   和   获取url参数:  

 1.  HOC 高阶组件  withRouter 跳转传值通信  

import React, { Component } from 'react'

import { withRouter } from 'react-router-dom';
//3. HOC 高阶组件  withRouter 传值通信   


export class LoginPage extends Component {

    render () {
        console.log(this.props)
        const { history, match, location } = this.props
        console.log(match.params) // 获取上个页面的路由参数
        console.log(history, match, location)
        return (
            <>
                
 history.push('/')}>withRouter跳转55555{match.params.id}
                
 history.goBack()}>返回{match.params.id}
                
 history.goForward()}>前进{match.params.id}
            
        )
    }
}
export default withRouter(LoginPage)

 2.  hooks 跳转页面传值通信  　引入  import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

import { Button } from 'antd';
import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

export const HomePage = (props) => {
    const history = useHistory()
    const location = useLocation()
    const params = useParams()
    const routeMatch = useRouteMatch()
    console.log(history, location, params, routeMatch)
    return (
        <>
            

                 history.push(`login/111`)}>跳转登录
                跳转注册
            

        
    )

}

import { Button } from 'antd';
import {Link } from 'react-router-dom';

export const HomePage = () => {return (
            

                {/* 2. Link组件跳转页面 */}
                
                    Link组件跳转
                
            

    )
}

二 . react-router v6: 两种常用的跳转   和   获取url参数: 

 1.  useNavigate

import React from "react";
import styles from './Header.module.css'
import { Button } from 'antd'
import { useParams, useLocation, useNavigate } from "react-router-dom";

export const Header: React.FC = (id=0) => {

    const navigate = useNavigate() // 进行页面的处理
    const location = useLocation() // 当前路径信息,保存当前路由状态
    const params = useParams() // 获取url参数
    console.log(navigate, location, params)
return (
        

            

                    
                         navigate(`/login/${id}`)}>注册
                         navigate('/register')}>登录
                    
            
        

    )
}

　2. LInk

import React from "react";
import { Link } from 'react-router-dom'

export const ProductImage: React.FC = ({id=3, name }) => {
    return (
        
            xxxxxxx
        
    );
}