react如何封装router
封装 React Router 的常见方法
使用自定义路由组件
创建一个高阶组件或自定义路由组件，统一处理路由逻辑、权限校验或布局封装。例如，封装一个带有基础布局的 PrivateRoute：
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
<Route
{...rest}
render={(props) =>
isAuthenticated ? (
<Layout>
<Component {...props} />
</Layout>
) : (
<Redirect to="/login" />
)
}
/>
);集中式路由配置
将路由配置抽离为独立文件，便于管理和维护。例如通过数组定义路由，动态生成 <Route>：
const routes = [
{ path: '/', exact: true, component: Home },
{ path: '/dashboard', component: Dashboard, requiresAuth: true },
];
const AppRouter = () => (
<Switch>
{routes.map((route) => (
route.requiresAuth ?
<PrivateRoute key={route.path} {...route} /> :
<Route key={route.path} {...route} />
))}
</Switch>
);封装路由钩子
自定义 Hook 封装路由相关逻辑，例如获取当前路由参数或监听路由变化：
import { useLocation, useParams } from 'react-router-dom';
export const useRouter = () => {
const params = useParams();
const location = useLocation();
return { params, pathname: location.pathname };
};动态加载与代码分割
结合 React.lazy 和 Suspense 封装动态路由加载，提升性能：
const LazyDashboard = React.lazy(() => import('./Dashboard'));
const AppRouter = () => (
<Suspense fallback={<LoadingSpinner />}>
<Switch>
<Route path="/dashboard" component={LazyDashboard} />
</Switch>
</Suspense>
);类型安全封装（TypeScript）
为路由配置添加类型定义，增强代码健壮性：
interface RouteConfig {
path: string;
component: React.ComponentType;
exact?: boolean;
}
const routes: RouteConfig[] = [
{ path: '/', exact: true, component: Home },
];注意事项
- 确保依赖的
react-router-dom版本与封装方式兼容（v5 与 v6 API 差异较大）。 - 封装时保留路由组件的灵活性，避免过度设计导致扩展困难。
- 在 React Router v6 中可使用
useRoutes实现更简洁的配置化路由。
