v6路由层级设计最佳方案

v6路由层级设计最佳方案

React Router v6的路由层级设计是升级过程中需要重点考虑的问题。v6版本移除了Switch组件，采用更灵活的路由匹配机制，这要求我们重新思考路由结构的设计。

核心变化

v6中使用Routes替代Switch，路由匹配从严格匹配改为按路径匹配。这意味着子路由可以更好地嵌套和组合。

最佳实践方案

1. 基础层级设计

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>  
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="user/*" element={<User />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

2. 嵌套路由实现

// Layout.js
import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>头部导航</header>
      <main>
        <Outlet /> {/* 子路由出口 */}
      </main>
      <footer>底部信息</footer>
    </div>
  );
}

3. 动态路由配置

// DynamicRoutes.js
import { useRoutes } from 'react-router-dom';

function DynamicRoutes() {
  const routes = [
    {
      path: '/admin',
      element: <AdminLayout />,  
      children: [
        { path: 'dashboard', element: <Dashboard /> },
        { path: 'users', element: <Users /> }
      ]
    }
  ];
  
  return useRoutes(routes);
}