React-router-dom实现路由监听

博主来学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的文档也是这样子写的