v6路由配置文件管理

在React Router v6中，路由配置方式发生了显著变化。本文将详细介绍如何有效管理v6的路由配置文件。

核心变化

v6移除了Switch组件，改为使用Routes，并且路由匹配逻辑改为严格匹配。同时，useRouteMatch等API被移除，需要使用新的useMatch和useResolvedPath等API。

配置文件管理实践

1. 基础路由配置

// routes/index.js
import { Routes, Route } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
import NotFound from '../pages/NotFound';

const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

export default AppRoutes;

2. 嵌套路由管理

// routes/user.js
import { Routes, Route } from 'react-router-dom';
import UserLayout from '../layouts/UserLayout';
import Profile from '../pages/User/Profile';
import Settings from '../pages/User/Settings';

const UserRoutes = () => {
  return (
    <Routes>
      <Route path="/user" element={<UserLayout />}>
        <Route index element={<Profile />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
};

export default UserRoutes;

3. 动态路由配置

// utils/routeBuilder.js
export const buildRoutes = (routesConfig) => {
  return routesConfig.map((route, index) => {
    if (route.children) {
      return (
        <Route key={index} path={route.path} element={route.element}>
          {buildRoutes(route.children)}
        </Route>
      );
    }
    return (
      <Route 
        key={index} 
        path={route.path} 
        element={route.element} 
      />
    );
  });
};