React中根据URL设置导航栏选中状态的问题求助

你当前用组件本地state维护导航选中状态的方式，只在应用内跳转时有效——页面刷新时state会被重置，点击浏览器回退按钮时路由变化但state没同步更新，导致选中状态出错。

正确的做法是基于当前路由路径判断选中状态，利用React Router的useLocation钩子实时获取当前路由，完全替代本地state的作用。具体修改如下：

1. 补充导入useLocation和Outlet（原代码中Nav组件遗漏了Outlet的导入）
2. 删除用于维护选中状态的pageASelected、pageBSelected state
3. 通过useLocation()获取当前路由的pathname，根据路径直接判断对应导航项的选中状态
4. 简化导航点击事件，无需修改state，直接调用navigate跳转即可
5. 修正原代码两处错误：
   • Page B的onClick误绑定成了handlePageA
   • handlePageB里的navigate('ab')需改成navigate('b')（和App.js中的路由路径一致）

修改后的完整Nav.jsx代码：

import { List, ListItemButton } from '@mui/material'
import React from 'react'
import { useNavigate, useLocation, Outlet } from 'react-router-dom'

const Nav = () => {
    const navigate = useNavigate()
    const location = useLocation()

    // 根据当前路由路径判断选中状态
    const isPageASelected = location.pathname === '/a'
    const isPageBSelected = location.pathname === '/b'

    const handlePageA = () => {
        navigate('a')
    }

    const handlePageB = () => {
        navigate('b')
    }

    return (
        <List>
            <ListItemButton selected={isPageASelected} onClick={handlePageA}>Page A</ListItemButton>
            <ListItemButton selected={isPageBSelected} onClick={handlePageB}>Page B</ListItemButton>
            <Outlet/>
        </List>
    )
}

export default Nav

App.js保持原有路由配置即可：

<Route path='/' element={<Nav/>}>
    <Route path='a' element={<PageA/>}/>
    <Route path='b' element={<PageB/>}/>
</Route>

原理说明 #

• useLocation会实时监听浏览器路由变化，页面刷新时会从URL读取当前路由，因此选中状态不会丢失
• 点击回退/前进按钮时，路由变化会触发组件重新渲染，isPageASelected和isPageBSelected会自动更新，确保选中状态与当前路由完全匹配

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