React Router路由配置：部分路由包裹组件且404页不显示Header

问题回顾 #

• 核心需求：Header等公共组件在大部分页面显示，特定页面（含404错误页）不显示
• 原有代码的两个问题：
  1. 用户访问的原路由丢失，被强制重定向到notFound.html
  2. 404页面会触发自定义ConfirmLogin组件的登录校验，登录后仍跳转到404页，期望404页无需登录即可直接访问

尝试过的无效方案 #

• 曾尝试一种嵌套路由写法，但因Route必须作为Routes的直接子组件而失效
• 考虑过维护一份有效路径列表来判断是否显示Header，但不想重复维护路径，增加后续维护成本

可行解决方案 #

利用react-router中无path的Route并非匹配所有路径的特性，结合Outlet组件实现布局嵌套，完美解决需求：

1. 用无path的Route包裹需要显示Header的路由，在该路由的元素中渲染Header和Outlet（用于渲染子路由内容）
2. 将404路由单独放在Routes下，不包含在上述无path的Route中，确保其不会触发Header和登录校验

示例代码 #

import { Routes, Route, Outlet } from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
import ConfirmLogin from './ConfirmLogin';

// 带Header的布局组件，可在此加入登录校验逻辑（仅作用于嵌套路由）
const LayoutWithHeader = () => {
  // 示例：仅对需要登录的路由做校验，404页不受影响
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
};

function App() {
  return (
    <Routes>
      {/* 所有需要显示Header的路由嵌套在此无path的Route下 */}
      <Route element={<LayoutWithHeader />}>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* 其他需要Header的路由... */}
      </Route>
      
      {/* 404路由单独配置，不受LayoutWithHeader影响，无需登录即可访问 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

效果说明 #

• 所有嵌套在LayoutWithHeader下的路由会自动显示Header，登录校验仅作用于这些路由
• 404页面直接匹配path="*"，不会触发Header和登录校验，用户访问不存在的路由时直接显示404，原路由信息不会丢失

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