v6版本代码规范

React Router v6 代码规范实践

React Router v6 相较于 v5 在 API 设计上进行了重大重构，为确保代码质量和可维护性，需要遵循以下规范。

路由配置规范

在 v6 中，路由组件需使用 createBrowserRouter 创建路由配置，所有路由必须包裹在 <RouterProvider> 组件中。示例代码：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />, // 必须是组件而非函数
    loader: homeLoader, // 异步数据加载
  },
  {
    path: '/user/:id',
    element: <User />, 
    loader: userLoader,
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

组件编写规范

1. 路由组件必须使用函数式组件，避免使用类组件
2. 所有路由参数通过 useParams 获取，而非 props
3. 使用 useNavigate 进行页面跳转
4. 数据加载统一使用 loader 配置，避免在组件中直接调用

代码复现步骤

1. 安装 v6 版本：npm install react-router-dom@latest
2. 替换旧版路由配置为 createBrowserRouter
3. 使用 <RouterProvider> 包裹应用
4. 将所有组件中的路由逻辑迁移至 loader 和 action 中
5. 测试路由跳转和参数传递功能

遵循以上规范可确保代码符合 v6 版本最佳实践，提升项目可维护性。