react-router-dom v6如何集成不展示TopNav的登录页面路由

你当前代码里<TopNav />是直接全局挂载在路由容器下的，所以所有路径都会显示导航栏。要实现登录页隐藏TopNav，有两种常用实现方式，都适配你当前用的React Router v6版本：

方案1：嵌套布局路由（官方推荐，易扩展） #

把需要展示TopNav的业务页面统一归到公共布局路由下，登录页这类不需要导航的页面单独放在外层，不套用业务布局即可。

• 先定义带TopNav的通用业务布局组件，记得从react-router-dom引入Outlet作为子路由的渲染出口：

import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

// 业务页通用布局：带顶部导航
const BusinessLayout = () => {
  return (
    <>
      <TopNav />
      {/* 匹配到的子路由页面会渲染在这里 */}
      <Outlet />
    </>
  )
}

• 修改App组件的路由结构，把业务页嵌套到布局路由下，登录页单独配置：

const App = () => {
  return(
    <BrowserRouter>
      <Routes>
        {/* 无TopNav的页面单独配置，不套BusinessLayout */}
        <Route path="/login" element={<Login />} />

        {/* 所有需要显示TopNav的业务页嵌套在布局路由下 */}
        <Route element={<BusinessLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/horahora" element={<HoraHora />}/>
          <Route path="/fornecimento" element={<Fornecimento />}/>
          <Route path="/performance" element={<Performance />}/>
          <Route path="/porcentagemOEE" element={<PorcentagemOEE />}/>
          <Route path="/perdasDia" element={<PerdasDia />}/>
          <Route path="/paretoPerdas" element={<ParetoPerdas />}/>
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App;

这个方案的优势是结构清晰，后续加注册页、忘记密码页这类不需要导航的页面，直接和登录页平级配置即可；后续要给业务页加侧边栏、全局权限校验、页脚等通用逻辑，直接修改BusinessLayout就行，不用重复给每个页面加代码。

方案2：路径判断按需渲染TopNav（改动量小） #

如果不想调整现有路由嵌套结构，可以通过useLocation钩子获取当前访问路径，判断路径为登录页时不渲染TopNav。
注意useLocation必须在BrowserRouter的上下文范围内调用，所以如果你的BrowserRouter是写在App组件内部的，需要把路由内容抽成独立的子组件：

import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';

// 路由内容组件，放在BrowserRouter内部，可以正常调用路由钩子
const AppContent = () => {
  const location = useLocation();
  // 配置所有需要隐藏TopNav的路径
  const hideNavPaths = ['/login'];
  const showTopNav = !hideNavPaths.includes(location.pathname);

  return (
    <>
      {showTopNav && <TopNav />}
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<Home />} />
        <Route path="/horahora" element={<HoraHora />}/>
        <Route path="/fornecimento" element={<Fornecimento />}/>
        <Route path="/performance" element={<Performance />}/>
        <Route path="/porcentagemOEE" element={<PorcentagemOEE />}/>
        <Route path="/perdasDia" element={<PerdasDia />}/>
        <Route path="/paretoPerdas" element={<ParetoPerdas />}/>
      </Routes>
    </>
  )
}

const App = () => {
  return (
    <BrowserRouter>
      <AppContent />
    </BrowserRouter>
  )
}

export default App;

这个方案适合不需要TopNav的页面数量少的场景，改动量小；如果后续这类页面持续增加，还是更推荐用第一种布局路由的方案，维护成本更低。

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