React Router多路由文件拆分：布局与嵌套路由实现咨询

核心思路 #

将展示站（Showcase）和用户站（User）的路由分别封装为独立组件，每个组件内部定义专属布局（包含各自的Header），通过Outlet实现嵌套路由的内容渲染，最后在主路由文件中统一引入这两个路由组件即可。

1. 完善展示站路由（ShowcaseRoute.jsx） #

现有代码逻辑已达标，仅需确保组件结构规范：

import { Route, Outlet } from 'react-router-dom';
import Header from './ShowcaseHeader'; // 展示站专属Header
import Footer from './Footer';
import Home from './Home';
import About from './About';
import Contact from './Contact';

export default function ShowcaseRoute() {
  // 展示站专属布局
  const ShowcaseLayout = () => (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );

  return (
    <Route element={<ShowcaseLayout />}>
      {/* 根路径默认渲染Home */}
      <Route index element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Route>
  );
}

2. 实现用户站路由（UserRoute.jsx） #

参照展示站结构，创建用户站专属布局与嵌套路由：

import { Route, Outlet } from 'react-router-dom';
import UserHeader from './UserHeader'; // 用户站专属Header
import Login from './Login';
import Register from './Register';
import UserProfile from './UserProfile';
import UserDashboard from './UserDashboard';

export default function UserRoute() {
  // 用户站专属布局
  const UserLayout = () => (
    <>
      <UserHeader />
      <Outlet />
    </>
  );

  return (
    <>
      {/* auth路由组：无需共用布局时单独定义 */}
      <Route path="/auth">
        <Route index element={<Login />} />
        <Route path="register" element={<Register />} />
      </Route>

      {/* 用户中心路由组：使用UserLayout共享Header */}
      <Route path="/user" element={<UserLayout />}>
        <Route index element={<UserDashboard />} />
        <Route path="profile" element={<UserProfile />} />
      </Route>
    </>
  );
}

3. 主路由文件（Index.js） #

注意需以组件形式调用路由组件，而非直接引用变量：

import { BrowserRouter, Routes } from 'react-router-dom';
import ShowcaseRoute from './ShowcaseRoute';
import UserRoute from './UserRoute';

function Index() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 引入展示站路由 */}
        <ShowcaseRoute />
        {/* 引入用户站路由 */}
        <UserRoute />
      </Routes>
    </BrowserRouter>
  );
}

export default Index;

关键说明 #

• 布局复用：通过Outlet组件分离布局与页面内容，每个站点可独立维护专属导航栏、页脚等元素。
• 路由隔离：两个站点的路由拆分到不同文件，便于后续单独维护和扩展。
• 嵌套路由支持：无论是展示站的一级路由，还是用户站的/auth、/user嵌套路由，都能正常匹配渲染。

内容的提问来源于stack exchange，提问作者Guerlain BLANCHARD guerlblanch