当前位置：首页 > React

在react中如何封装路由

2026-01-25 05:37:55React

封装路由的基本方法

在React中封装路由通常通过react-router-dom库实现，结合模块化思想将路由配置独立管理。以下是一个典型封装方案：

安装依赖
确保项目已安装react-router-dom（v6或更高版本）：
```
npm install react-router-dom
```

创建路由配置文件
新建src/routes/index.js，集中定义路由结构：

import { createBrowserRouter } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
import NotFound from '../pages/NotFound';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '*',
    element: <NotFound />,
  }
]);

export default router;

动态路由与懒加载

通过lazy和Suspense实现按需加载，提升性能：

import { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('../components/LazyComponent'));

const router = createBrowserRouter([
  {
    path: '/lazy',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    ),
  }
]);

路由守卫封装

实现鉴权逻辑的高阶组件：

function PrivateRoute({ children }) {
  const isAuthenticated = !!localStorage.getItem('token');
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// 使用示例
{
  path: '/dashboard',
  element: <PrivateRoute><Dashboard /></PrivateRoute>,
}

嵌套路由配置

通过Outlet实现布局嵌套：

// 父级路由
{
  path: '/admin',
  element: <AdminLayout />,
  children: [
    { path: 'users', element: <Users /> },
    { path: 'settings', element: <Settings /> }
  ]
}

// AdminLayout.jsx
import { Outlet } from 'react-router-dom';
function AdminLayout() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

TypeScript支持

为路由配置添加类型定义：

interface RouteItem {
  path: string;
  element: React.ReactNode;
  children?: RouteItem[];
}

const routes: RouteItem[] = [
  { path: '/', element: <Home /> }
];