React-Router中如何动态修改导航按钮的文本与跳转路径

不需要通过父组件传props，直接在NavBar组件内调用React Router内置的useLocation钩子获取当前路由路径，就能动态切换按钮的跳转目标和显示文本，逻辑完全内聚在组件里，不管被哪个页面引用都能正常生效，不会出现传参遗漏、状态不同步的问题。

实现要点 #

• 从react-router-dom中引入useLocation钩子
• 在组件内调用钩子拿到当前路由的pathname字段
• 判断当前路径是否匹配NEXUM页面对应路由，根据结果动态设置按钮的点击回调、显示文本
• 注意：路径判断要和项目内实际路由配置的大小写完全一致，如果你配置的路由是大写/NEXUM，判断时要对应修改，避免匹配失效。如果NEXUM页面下存在动态子路径（比如/nexum/xxx），可以把判断逻辑改为location.pathname.startsWith('/nexum')适配子路径场景。

修改后完整代码 #

import { useNavigate, useLocation } from 'react-router-dom';
// 保留原有MUI组件、logo等资源的引入不变

const NavBar = () => {
    const navigate = useNavigate();
    const location = useLocation();
    // 识别当前是否处于NEXUM页面
    const isOnNexumPage = location.pathname === '/nexum';

    const handleNavClick = () => {
        navigate(isOnNexumPage ? '/' : '/nexum');
    };

    const handleLogoClick = () => {
        navigate('/');
    };

    return (
        <Box sx={{ flexGrow: 1 }}>
            <AppBar id="bar">
                <Toolbar>
                    <img onClick={handleLogoClick} className="logo" src={logo} alt="site logo" />
                    <Button 
                        onClick={handleNavClick} 
                        id='nexumNavigation'
                    >
                        {/* 替换此处的文本为NEXUM页面下按钮需要显示的文案即可 */}
                        {isOnNexumPage ? '返回首页' : 'להכנסת קובץ אקסל ישיר'}
                    </Button>
                </Toolbar>
            </AppBar>
        </Box>
    )
}

export default NavBar

内容的提问来源于stack exchange，提问作者MikeyNeedHelp