react如何封装router

封装 React Router 的基本方法

在 React 中封装 Router 通常是为了简化路由配置或实现统一的路由管理。以下是常见的封装方式：

创建统一路由配置文件

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

封装路由组件

// RouterWrapper.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import routes from './routes';

const RouterWrapper = () => {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            element={route.element}
            exact={route.exact}
          />
        ))}
      </Routes>
    </BrowserRouter>
  );
};

实现动态路由加载

对于大型应用，可以结合 React.lazy 实现代码分割：

动态路由配置

// routes.js
const routes = [
  {
    path: '/dashboard',
    component: React.lazy(() => import('./Dashboard'))
  }
];

封装 Suspense 处理

// RouterWrapper.jsx
import { Suspense } from 'react';

const RouterWrapper = () => (
  <BrowserRouter>
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        {routes.map((route) => (
          <Route
            path={route.path}
            element={<route.component />}
          />
        ))}
      </Routes>
    </Suspense>
  </BrowserRouter>
);

添加路由守卫功能

可以通过高阶组件实现路由权限控制：

创建路由守卫

// AuthRoute.jsx
const AuthRoute = ({ element, requiredRoles }) => {
  const { user } = useAuth();

  if (!user || !requiredRoles.includes(user.role)) {
    return <Navigate to="/login" />;
  }

  return element;
};

更新路由配置

// routes.js
{
  path: '/admin',
  element: <AuthRoute element={<AdminPage />} requiredRoles={['admin']} />
}

类型安全的 TypeScript 封装

使用 TypeScript 可以增强路由配置的类型安全：

定义路由类型

// types/routes.ts
interface RouteConfig {
  path: string;
  element: React.ReactNode;
  children?: RouteConfig[];
  guard?: React.ComponentType;
}

类型化路由组件

// RouterWrapper.tsx
const RouterWrapper: React.FC<{ routes: RouteConfig[] }> = ({ routes }) => {
  const renderRoutes = (routes: RouteConfig[]) => (
    routes.map((route) => (
      <Route
        key={route.path}
        path={route.path}
        element={route.guard ? <route.guard>{route.element}</route.guard> : route.element}
      >
        {route.children && renderRoutes(route.children)}
      </Route>
    ))
  );

  return (
    <BrowserRouter>
      <Routes>
        {renderRoutes(routes)}
      </Routes>
    </BrowserRouter>
  );
};

这些方法可以根据具体项目需求进行组合或调整，实现不同复杂度的路由封装方案。