路由配置-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

图片[1]-路由配置-routerv6路由-唐朝资源网

扩展:

一个.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 (

        
            
) }

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


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

图片[2]-路由配置-routerv6路由-唐朝资源网

export const HomePage = () => {return (
{/* 2. Link组件跳转页面 */}
) }

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

1.使用导航

import React from "react";
import styles from './Header.module.css'

图片[3]-路由配置-routerv6路由-唐朝资源网

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 (

图片[4]-路由配置-routerv6路由-唐朝资源网

) }

2.链接

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

© 版权声明
THE END
喜欢就支持一下吧
点赞242 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片