当前位置：首页 > React

react如何组织路由

2026-01-23 20:56:16React

React 路由的组织方式

React 应用通常使用 react-router-dom 库来管理路由。以下是几种常见的路由组织方式：

集中式路由配置

将所有路由定义在一个单独的文件中，便于管理和维护：

react如何组织路由

// routes.js
import { Home, About, Contact, NotFound } from './pages';

export const routes = [
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
  { path: '/contact', element: <Contact /> },
  { path: '*', element: <NotFound /> }
];

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { routes } from './routes';

function App() {
  return (
    <Router>
      <Routes>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} element={route.element} />
        ))}
      </Routes>
    </Router>
  );
}

模块化路由

将路由拆分到各自的功能模块中，实现按需加载：

// products/routes.js
const ProductsRoutes = () => (
  <Routes>
    <Route path="/products" element={<ProductList />} />
    <Route path="/products/:id" element={<ProductDetail />} />
  </Routes>
);

// App.js
import { lazy } from 'react';

const ProductsRoutes = lazy(() => import('./products/routes'));

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/products/*" element={<ProductsRoutes />} />
      </Routes>
    </Router>
  );
}

嵌套路由

利用嵌套路由组织父子页面关系：

react如何组织路由

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />}>
            <Route index element={<DashboardHome />} />
            <Route path="settings" element={<DashboardSettings />} />
          </Route>
        </Route>
      </Routes>
    </Router>
  );
}

动态路由加载

结合 React 的 lazy 和 Suspense 实现代码分割：

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    </Suspense>
  );
}

路由守卫

通过高阶组件或自定义包装实现路由权限控制：

const PrivateRoute = ({ children }) => {
  const auth = useAuth();
  return auth ? children : <Navigate to="/login" />;
};

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/dashboard"
          element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          }
        />
      </Routes>
    </Router>
  );
}