如何通过React Router DOM拆分路由以精简App.jsx文件？

解决<Routes>内只能包含<Route>组件的报错问题，实现路由拆分以精简App.jsx文件。

报错原因 #

react-router-dom的<Routes>组件仅允许直接嵌套<Route>或<React.Fragment>，无法直接放置自定义组件，因此需要调整拆分方式，让自定义路由组件返回合法的路由结构。

具体实现步骤 #

1. 抽离公共路由到 PublicRoutes.jsx #

创建单独的公共路由组件，返回所有公开访问的路由：

import { Route } from 'react-router-dom';
import Landing from './Landing';
import Support from './Support';
import Apply from './Apply';
import About from './About';
import Login from './Login';

export default function PublicRoutes() {
  return (
    <>
      <Route path="/" element={<Landing />} />
      <Route path="/support" element={<Support />} />
      <Route path="/apply" element={<Apply />} />
      <Route path="/about" element={<About />} />
      <Route path="/login" element={<Login />} />
    </>
  );
}

2. 抽离后台路由到 AdminRoutes.jsx #

创建后台路由组件，接收鉴权状态isAuthenticated，返回需要权限验证的路由：

import { Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import AdminLayout from './AdminLayout';
import Dashboard from './Dashboard';
import Tickets from './Tickets';
import Orders from './Orders';

export default function AdminRoutes({ isAuthenticated }) {
  return (
    <>
      <Route
        path="/admin/dashboard"
        element={
          <PrivateRoute isAuthenticated={isAuthenticated}>
            <AdminLayout>
              <Dashboard />
            </AdminLayout>
          </PrivateRoute>
        }
      />
      <Route
        path="/admin/tickets"
        element={
          <PrivateRoute isAuthenticated={isAuthenticated}>
            <AdminLayout>
              <Tickets />
            </AdminLayout>
          </PrivateRoute>
        }
      />
      <Route
        path="/admin/orders"
        element={
          <PrivateRoute isAuthenticated={isAuthenticated}>
            <AdminLayout>
              <Orders />
            </AdminLayout>
          </PrivateRoute>
        }
      />
    </>
  );
}

3. 简化 App.jsx #

引入拆分后的路由组件，直接放置在<Routes>中：

import { Router, Routes } from 'react-router-dom';
import userTokenStore from './userTokenStore';
import PublicRoutes from './PublicRoutes';
import AdminRoutes from './AdminRoutes';

function App() {
  const isAuthenticated = userTokenStore((state) => state.isLoggedIn);

  return (
    <Router>
      <Routes>
        <PublicRoutes />
        <AdminRoutes isAuthenticated={isAuthenticated} />
      </Routes>
    </Router>
  );
}

export default App;

可选优化：用嵌套路由精简后台路由 #

如果后台路由有统一布局，可以用嵌套路由进一步简化结构：

修改 AdminRoutes.jsx：

import { Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import AdminLayout from './AdminLayout';
import Dashboard from './Dashboard';
import Tickets from './Tickets';
import Orders from './Orders';

export default function AdminRoutes({ isAuthenticated }) {
  return (
    <Route
      path="/admin"
      element={
        <PrivateRoute isAuthenticated={isAuthenticated}>
          <AdminLayout />
        </PrivateRoute>
      }
    >
      <Route index element={<Dashboard />} />
      <Route path="tickets" element={<Tickets />} />
      <Route path="orders" element={<Orders />} />
    </Route>
  );
}

同时确保 AdminLayout 包含<Outlet>组件，用于渲染子路由内容：

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

export default function AdminLayout() {
  return (
    <div className="admin-layout">
      {/* 后台公共导航/侧边栏 */}
      <Outlet /> {/* 子路由页面会在这里渲染 */}
    </div>
  );
}

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