react如何封装router

在React中封装Router

React Router是React应用中常用的路由管理库，通过封装可以提升代码复用性和可维护性。以下是封装React Router的几种方法：

封装路由配置

将路由配置集中管理，便于维护和扩展。创建一个单独的文件存放路由配置：

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

export default routes;

创建路由组件

封装一个可复用的路由组件，动态渲染路由配置：

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

const AppRouter = () => {
  return (
    <Router>
      <Routes>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            element={route.element}
            exact={route.exact}
          />
        ))}
      </Routes>
    </Router>
  );
};

export default AppRouter;

添加路由守卫

通过高阶组件或自定义钩子实现路由守卫功能，控制访问权限：

// PrivateRoute.jsx
import { Navigate } from 'react-router-dom';

const PrivateRoute = ({ children, isAuthenticated }) => {
  return isAuthenticated ? children : <Navigate to="/login" />;
};

export default PrivateRoute;

动态加载路由

结合React的lazy和Suspense实现路由懒加载：

// routes.js
import { lazy } from 'react';

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

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

嵌套路由封装

封装处理嵌套路由的逻辑，使子路由配置更清晰：

// routes.js
const routes = [
  {
    path: '/dashboard',
    element: <DashboardLayout />,
    children: [
      {
        path: 'profile',
        element: <ProfilePage />
      },
      {
        path: 'settings',
        element: <SettingsPage />
      }
    ]
  }
];

使用自定义Hook管理路由

创建自定义Hook来处理路由相关逻辑：

// useRouter.js
import { useNavigate, useLocation } from 'react-router-dom';

const useRouter = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const goTo = (path) => navigate(path);
  const getCurrentPath = () => location.pathname;

  return { goTo, getCurrentPath };
};

export default useRouter;

这些封装方法可以根据项目需求组合使用，构建出灵活且易于维护的路由系统。