v6路由参数验证踩坑：参数合法性校验方法对比分析

在React Router v6升级过程中，路由参数验证是一个常见但容易踩坑的问题。本文将对比几种常见的参数合法性校验方法。

问题场景

当使用useParams()获取路由参数时，我们经常遇到参数类型不匹配或缺失的情况。例如，在路径/user/:id中，如果用户传入非数字ID，会导致后续逻辑异常。

常见错误做法

// ❌ 错误示例
const { id } = useParams();
const userData = fetchUser(id); // 直接使用，未验证参数合法性

解决方案对比

方案一：基础类型校验

const UserPage = () => {
  const { id } = useParams();
  
  if (!id || isNaN(id)) {
    return <div>无效的用户ID</div>;
  }
  
  const userData = fetchUser(parseInt(id));
  // ...渲染逻辑
};

方案二：自定义Hook封装

const useValidatedParams = () => {
  const params = useParams();
  
  return {
    id: params.id && !isNaN(params.id) ? parseInt(params.id) : null,
    // 其他参数验证
  };
};

// 使用
const { id } = useValidatedParams();

方案三：使用Zod进行Schema验证

import { z } from 'zod';

const userParamsSchema = z.object({
  id: z.string().regex(/^[0-9]+$/),
});

const UserPage = () => {
  const params = useParams();
  
  try {
    const validatedParams = userParamsSchema.parse(params);
    const userData = fetchUser(validatedParams.id);
  } catch (error) {
    return <div>参数验证失败</div>;
  }
};