当前位置：首页 > React

react如何组织路由

2026-02-12 00:58:10React

React 路由的组织方式

React 应用通常使用 react-router-dom 库实现路由功能。以下是几种常见的路由组织方式：

1. 集中式路由配置 将路由配置集中在一个文件中，便于管理和维护。

// routes.js
const routes = [
  {
    path: '/',
    element: <HomePage />,
  },
  {
    path: '/about',
    element: <AboutPage />,
  },
  {
    path: '/contact',
    element: <ContactPage />,
  },
];

2. 动态路由加载 结合 React 的 lazy 和 Suspense 实现按需加载。

react如何组织路由

const HomePage = lazy(() => import('./pages/HomePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));

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

3. 嵌套路由 使用 Outlet 组件实现嵌套路由结构。

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<HomePage />} />
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="analytics" element={<Analytics />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Route>
    </Routes>
  );
}

4. 权限路由 通过高阶组件或自定义路由组件实现权限控制。

react如何组织路由

function PrivateRoute({ element, ...rest }) {
  const isAuthenticated = checkAuth();
  return isAuthenticated ? element : <Navigate to="/login" />;
}

function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        path="/admin"
        element={<PrivateRoute element={<AdminPage />} />}
      />
    </Routes>
  );
}

5. 模块化路由 将路由拆分到各个功能模块中，保持代码的模块化。

// userRoutes.js
export const userRoutes = [
  {
    path: '/profile',
    element: <UserProfile />,
  },
  {
    path: '/settings',
    element: <UserSettings />,
  },
];

// adminRoutes.js
export const adminRoutes = [
  {
    path: '/dashboard',
    element: <AdminDashboard />,
  },
];

6. 路由守卫 通过监听路由变化实现全局路由守卫。

function RouterGuard() {
  const location = useLocation();
  useEffect(() => {
    trackPageView(location.pathname);
  }, [location]);
  return null;
}

function App() {
  return (
    <Router>
      <RouterGuard />
      <Routes>
        {/* 路由配置 */}
      </Routes>
    </Router>
  );
}

选择哪种路由组织方式取决于项目规模、团队偏好和具体需求。大型项目通常采用集中式配置结合模块化路由的方式，中小型项目可能更适合简单的嵌套路由结构。