react-router@6中404页面独立主布局渲染，子路由仅显布局问题

你的问题出在主布局组件<Layout>没有包含React Router v6的<Outlet>组件——这是嵌套路由中用来渲染子路由内容的核心容器。

在React Router v6的嵌套路由机制里，父路由的element组件必须通过<Outlet>来指定子路由内容的渲染位置，否则子路由的页面组件（比如HomePage、LoginPage）无法被渲染到页面上。

步骤1：修改Layout组件 #

在你的Layout组件中导入并添加<Outlet>：

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

function Layout() {
  return (
    <div className="layout-container">
      {/* 这里是你的布局头部、侧边栏等固定内容 */}
      <header>网站头部</header>
      <aside>侧边导航</aside>
      
      {/* 子路由内容会渲染在这个Outlet位置 */}
      <Outlet />
      
      {/* 布局底部 */}
      <footer>网站底部</footer>
    </div>
  );
}

export default Layout;

步骤2：保留现有路由结构 #

你的路由配置本身是正确的，不需要修改。修改Layout后，访问/时会渲染Layout包裹HomePage，访问/login时渲染Layout包裹LoginPage，path="*"的404页面依然会在Layout之外独立渲染。

修改后的完整路由代码（与你原有代码结构一致，仅Layout内部变化）：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import HomePage from './HomePage';
import LoginPage from './LoginPage';
import PageNotFound from './PageNotFound';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route path='/' element={<HomePage />} />
          <Route path='login' element={<LoginPage />} />
        </Route>
        <Route path='*' element={<PageNotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Bobby Wan-Kenobi