React Router如何为404页面配置独立专属布局？

核心实现思路 #

调整路由结构，使用嵌套布局路由替代通配符/*匹配所有路径的写法，只有命中合法业务路径时才加载带公共导航的主布局，未命中的路径直接匹配根级通配符路由，渲染无导航的独立404页面。

完整修改后代码 #

import { Outlet } from 'react-router-dom';

function App() {
  // 带公共导航的主布局组件
  const MainLayout = () => {
    return (
      <section className="app_section">
        <div className="navbar_container">
          <Navbar />
        </div>
        <div className="pages_container">
          {/* 子路由匹配内容的渲染占位符 */}
          <Outlet />
        </div>
      </section>
    );
  };

  // 独立404组件，无公共导航
  const NotFound = () => {
    return <p>404</p>;
  };

  return (
    <div className="App">
      <Routes>
        {/* 登录页：独立布局 */}
        <Route path="login" element={<Login />} />
        {/* 带公共导航的业务路由组 */}
        <Route element={<MainLayout />}>
          <Route path="/" element={<HomePage />} />
          <Route path="dashboard" element={<DashboardPage />} />
          <Route path="about" element={<AboutPage />} />
          <Route path="terms" element={<TermsPage />} />
          <Route path="privacy" element={<PrivacyPage />} />
          <Route path="api" element={<Api />} />
        </Route>
        {/* 全局404路由：独立布局，优先级最低，匹配所有未命中路径 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

实现逻辑说明 #

• 未给MainLayout父路由设置固定路径，所有子路由会自动继承主布局，同时不会拦截未知路径
• React Router v6会优先匹配精确路径，只有命中业务路由列表中的路径时，才会渲染带导航的主布局
• 所有未匹配到精确路径的请求，都会走到根级*路由，渲染完全独立的404页面，不会加载公共导航栏组件

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