路由配置-routerv6路由

简要说明：

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的区别：

常规简单路由配置Demo图：

1.react-routerv5：通过props注入获取路由状态；

类组件：（HOC高阶组件）withRouter==>history, location, match；任何组件都可以具有这些属性

功能组件：useHistory、useLocation、useParams、useRouteMatch 来完成它

2.react-routerv6：因为它完全反转为功能组件；只需使用钩子、useLocation、useParams；请注意，useHistory 已更改为 useNavigate

扩展：

一个.react-routerv5：三个常用的跳转和获取url参数：

1.HOC高阶组件与Router跳转值通信

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`)}>跳转登录
                跳转注册
            
        
    )
}

3.链接跳转页面传值通信引入import { Link } from ‘react-router-dom’

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

export const HomePage = () => {return (
            

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

    )
}

两个.react-routerv6：两个常用的跳转和获取url参数：

1.使用导航

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.链接

import React from "react";
import { Link } from 'react-router-dom'
export const ProductImage: React.FC = ({id=3, name }) => {
    return (
        
            xxxxxxx
        
    );
}