使用React Router的SPA中部分页面禁用side menu需刷新才生效如何解决

问题原因 #

你当前的侧边栏显隐判断逻辑只在App组件首次渲染时执行了一次，没有订阅路由状态的变化，路由切换时App组件不会触发重渲染，所以配置不会实时生效，只有刷新页面重新初始化App组件时才会读取最新路由做判断。

修复方案 #

方案1：使用useLocation钩子监听路由变化 #

这是改动最小的适配方案，兼容React Router v6/v5版本：

• 在App组件中引入React Router提供的useLocation钩子，拿到实时的当前路径pathname
• 把需要隐藏侧边栏的路径存到常量数组中，用实时pathname匹配数组判断是否展示侧边栏
• useLocation的返回值会在每次路由切换时更新，会自动触发App组件重渲染，实时更新侧边栏显隐状态
  示例代码：

import { useLocation, Routes, Route } from 'react-router-dom'
import SideMenu from './components/SideMenu'
import Home from './pages/Home'
import Login from './pages/Login'
import NotFound from './pages/NotFound'

// 不需要展示侧边栏的路径列表
const HIDE_SIDEMENU_PATHS = ['/login', '/404']

function App() {
  const { pathname } = useLocation()
  // 实时判断当前路径是否需要隐藏侧边栏
  const shouldHideSideMenu = HIDE_SIDEMENU_PATHS.includes(pathname)

  return (
    <div className="app-container">
      {!shouldHideSideMenu && <SideMenu />}
      <div className="main-content">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </div>
  )
}

方案2：路由嵌套拆分布局 #

如果你的页面明确分为带侧边栏/不带侧边栏两类，用嵌套路由拆分布局逻辑更清晰，后续维护成本更低：

• 单独封装带侧边栏的布局组件，所有需要侧边栏的页面都作为该布局的子路由
• 不需要侧边栏的页面直接走根路由匹配规则
  示例代码：

import { Routes, Route, Outlet } from 'react-router-dom'
import SideMenu from './components/SideMenu'
import Home from './pages/Home'
import Login from './pages/Login'
import User from './pages/User'

// 带侧边栏的布局组件
function LayoutWithSideMenu() {
  return (
    <div className="layout-with-sidemenu">
      <SideMenu />
      <div className="content">
        {/* 子路由内容会渲染到Outlet占位位置 */}
        <Outlet />
      </div>
    </div>
  )
}

function App() {
  return (
    <Routes>
      {/* 不需要侧边栏的页面 */}
      <Route path="/login" element={<Login />} />
      {/* 需要侧边栏的页面都嵌套在该布局路由下 */}
      <Route element={<LayoutWithSideMenu />}>
        <Route path="/" element={<Home />} />
        <Route path="/user" element={<User />} />
      </Route>
    </Routes>
  )
}

注意事项 #

• 不要直接用window.location.pathname做判断，该值的变化不会触发React组件重渲染，必须通过React Router提供的钩子获取路由状态
• 如果使用React Router v5版本，仅需调整嵌套路由的写法对应v5规则即可，useLocation的使用逻辑不变

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