v6升级后代码规范制定

React Router v6的升级带来了许多重要变化，为了确保团队开发的一致性和代码质量，我们需要建立一套清晰的代码规范。

路由定义规范

在v6中，推荐使用createBrowserRouter替代旧版的BrowserRouter和Routes组件。路由配置应统一在routes.tsx文件中定义：

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

const routes = createBrowserRouter([
  {
    path: '/',
    element: <Home />, // 顶层组件
    children: [
      {
        index: true,
        element: <Dashboard />
      },
      {
        path: 'profile',
        element: <Profile />
      }
    ]
  }
]);

组件结构规范

使用useNavigate Hook进行页面跳转，避免直接使用<Link>标签：

function NavigationButton() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/target-path');
  };
  
  return (
    <button onClick={handleClick}>跳转</button>
  );
}

参数传递规范

通过useParams获取动态路由参数，通过useSearchParams处理查询参数：

function UserProfile() {
  const { id } = useParams(); // 获取路径参数
  const [searchParams] = useSearchParams(); // 获取查询参数
  
  useEffect(() => {
    console.log('用户ID:', id);
    console.log('查询参数:', searchParams.get('tab'));
  }, [id, searchParams]);
  
  return <div>用户详情</div>;
}

路由守卫规范

使用useEffect和navigate实现权限控制：

function ProtectedRoute({ children }) {
  const { user } = useAuth();
  
  useEffect(() => {
    if (!user) {
      navigate('/login');
    }
  }, [user]);
  
  return user ? children : null;
}

建议团队成员在项目中统一使用以上规范，确保代码风格一致性。

SmallBody · 2026-01-08T10:24:58

v6升级后路由规范要落地，别光说不练。createBrowserRouter虽然简洁，但团队必须统一配置方式，避免出现路由层级混乱、嵌套过深的问题。

黑暗之王 · 2026-01-08T10:24:58

组件跳转用useNavigate是趋势，但别滥用。建议建立一个导航工具函数封装，避免每个页面都写重复的navigate逻辑，提高维护性。

BoldUrsula · 2026-01-08T10:24:58

参数处理要明确分工，params和searchParams不能混用。建议加个类型校验规则，防止运行时报错，特别是动态路由参数缺失时的兜底处理

v6升级后代码规范制定