React Router实现登录前后差异化导航栏页脚布局及404路由修复

预期实现的渲染规则 #

• 路径为/、/login时，仅显示Navbar组件和配套的Footer组件
• 路径为/dashboard、/settings时，仅显示NavbarInside组件和配套的FooterDashboard组件
• 所有未匹配的路径需要渲染自定义404页面NoMatchPage

现有代码的问题根因 #

• 布局组件没有绑定路径判断逻辑，当前写法下不管访问任何路径都会全量渲染所有导航和底部组件
• 路由没有用Switch组件包裹：Switch会按顺序匹配路由，仅渲染第一个匹配成功的路由；缺少它的话，无path的404路由会和所有正常路由同时渲染，无法实现“无匹配才显示404”的逻辑
• 路由拼写错误：后台路径写为/dashbaord（多了字母a），和预期的/dashboard不一致，会导致匹配失败
• 根路径/没有加exact属性，会导致访问其他路径时同时渲染首页内容

原始问题代码 #

<div>
  <Navbar /> {/* Navbar 仅在 '/' 和 '/login' 路径下显示 */}
  <Route path="/" component={IndexPage} />
  <Route path="/login" component={Login} />
  <Footer /> {/* Footer 仅在 '/' 和 '/login' 路径下显示 */}

  <NavbarInside /> {/* NavbarInside 仅在 '/dashboard' 和 '/settings' 路径下显示 */}
  <Route path="/dashbaord" component={Dashboard} />
  <Route path="/settings" component={Settings} />
  <FooterDashboard /> {/* FooterDashboard 仅在 '/dashboard' 和 '/settings' 路径下显示 */}

  {/* <Route component={NoMatchPage} /> 目前该404路由无法正常工作 */}
</div>

可运行的修复实现 #

（以下代码适配现有代码使用的React Router v5 API）

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

function App() {
  // 获取当前访问路径
  const { pathname } = useLocation();
  // 匹配公共路由分组
  const isPublicLayout = ['/', '/login'].includes(pathname);
  // 匹配后台路由分组
  const isDashboardLayout = ['/dashboard', '/settings'].includes(pathname);

  return (
    <div>
      {/* 仅公共路由分组渲染对应布局 */}
      {isPublicLayout && (
        <>
          <Navbar />
          <Footer />
        </>
      )}

      {/* 仅后台路由分组渲染对应布局 */}
      {isDashboardLayout && (
        <>
          <NavbarInside />
          <FooterDashboard />
        </>
      )}

      {/* 用Switch包裹所有路由，仅渲染第一个匹配的路由 */}
      <Switch>
        {/* 根路径加exact，避免和其他路径重复匹配 */}
        <Route path="/" exact component={IndexPage} />
        <Route path="/login" component={Login} />
        {/* 修正后台路径拼写错误 */}
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/settings" component={Settings} />
        {/* 放在路由最末尾，仅所有路径都不匹配时才渲染404页面 */}
        <Route component={NoMatchPage} />
      </Switch>
    </div>
  );
}

注意：如果使用React Router v6版本，需要将component属性替换为element属性，Switch替换为Routes，其余逻辑一致。

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