React-router-dom实现路由监听

费和惬
2023-12-01

博主来学react啦,真的挺多坑的相比vue,文档和版本很乱,一开始我不知道React-router-dom和React-router有啥区别,资料也不全,就下了React-router然后百度出了一个0.x的版本的文档出来,我也是佛了,就各种错误,才知道原来最新是React-router-dom,文档地址是https://reactrouter.com/docs/en/v6/api#uselocation,不要走错了,写的还可以相比而言,说实话这些文档都写得不是很通俗易懂,查了很多资料都很少找到有关React-router-dom,于是就自己弄一个,以下是代码

import React, { useEffect, useState } from "react";
import { Breadcrumb } from 'antd';
import { useLocation } from 'react-router-dom';

function BreadNav() {
    let location = useLocation()
    let [mainTitle, setMainTitle] = useState(0)
    let [secTitle, setSecTitle] = useState(0)
    console.log(location)

    useEffect(() => {
        if (location.pathname.indexOf('Good') !== -1) {
            setMainTitle('商品管理')
            if (location.pathname.indexOf('add') !== -1) {
                setSecTitle('添加商品')
            }
            else if (location.pathname.indexOf('del') !== -1) {
                setSecTitle('删除商品')
            }
            else {
                setSecTitle('修改商品')
            }
        }
        else {
            setMainTitle('首页')
            setSecTitle('')
        }
    }, [location])

    return (
        <Breadcrumb>
            <Breadcrumb.Item>{mainTitle}</Breadcrumb.Item>
            <Breadcrumb.Item>{secTitle}</Breadcrumb.Item>
        </Breadcrumb>
    )
}

export default BreadNav

这个新版本的router真的是,变向要你使用function而不是class,强行推给你用hook,无语

uselocation不能在class里用只能function

于是我就查文档,react里useeffect可以实现监听,于是把参数加进去就可以啦,router的文档也是这样子写的

 类似资料: