当前位置：首页 > React

react如何封装router

2026-01-15 10:53:20React

封装 React Router 的基本方法

在 React 中封装 Router 通常是为了统一管理路由配置、添加中间件或增强功能。以下是几种常见的封装方式：

基于 react-router-dom 的路由配置封装

创建一个独立的路由配置文件，集中管理所有路由：

// routes.js
import { Route } from 'react-router-dom';
import HomePage from './pages/Home';
import AboutPage from './pages/About';

export const routes = [
  {
    path: '/',
    exact: true,
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

// 在 App.js 中使用
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { routes } from './routes';

function App() {
  return (
    <Router>
      <Switch>
        {routes.map((route, i) => (
          <Route key={i} {...route} />
        ))}
      </Switch>
    </Router>
  );
}

创建高阶路由组件

通过高阶组件增强路由功能，例如添加身份验证：

// ProtectedRoute.js
import { Route, Redirect } from 'react-router-dom';

const ProtectedRoute = ({ isAuthenticated, ...props }) => {
  return isAuthenticated ? (
    <Route {...props} />
  ) : (
    <Redirect to="/login" />
  );
};

// 使用示例
<ProtectedRoute
  path="/dashboard"
  component={Dashboard}
  isAuthenticated={userLoggedIn}
/>

动态路由加载封装

结合 React.lazy 实现代码分割和动态加载：

// AsyncRoute.js
import { Suspense } from 'react';

const AsyncRoute = ({ component: Component, ...props }) => (
  <Route
    {...props}
    render={() => (
      <Suspense fallback={<div>Loading...</div>}>
        <Component />
      </Suspense>
    )}
  />
);

// 路由配置中使用
const routes = [
  {
    path: '/settings',
    component: React.lazy(() => import('./pages/Settings'))
  }
];

路由守卫封装

实现全局路由守卫逻辑：

// RouterGuard.js
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const RouterGuard = ({ children, authCheck }) => {
  const history = useHistory();

  useEffect(() => {
    if (!authCheck()) {
      history.push('/unauthorized');
    }
  }, [history, authCheck]);

  return children;
};

// 在根组件中使用
<Router>
  <RouterGuard authCheck={() => checkUserPermission()}>
    <AppRoutes />
  </RouterGuard>
</Router>

TypeScript 路由封装示例

为路由添加类型安全：

// types.ts
interface RouteConfig {
  path: string;
  component: React.ComponentType;
  exact?: boolean;
  guards?: Array<() => boolean>;
}

// routes.ts
const routes: RouteConfig[] = [
  {
    path: '/admin',
    component: AdminPanel,
    guards: [() => checkAdminRole()]
  }
];

这些封装方法可以根据具体需求组合使用，创建出符合项目架构的路由管理系统。关键是根据应用规模选择适当层级的封装，避免过度设计。

react如何封装router