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

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

问题场景 在v6中，使用useParams()获取路由参数后，发现没有内置的参数验证机制。例如：

const { id, category } = useParams(); // id可能为字符串，category可能为空

如果直接使用这些参数进行API调用，容易出现400错误。

方法一：手动校验

const validateParams = () => {
  const { id, category } = useParams();
  if (!id || isNaN(id)) return false;
  if (!category) return false;
  return true;
};

方法二：自定义Hook封装

const useValidatedParams = () => {
  const params = useParams();
  const isValid = useMemo(() => {
    return params.id && !isNaN(params.id) && params.category;
  }, [params]);
  
  return { params, isValid };
};

方法三：集成第三方库 使用zod进行类型校验：

import { z } from 'zod';
const paramsSchema = z.object({
  id: z.string().regex(/^[0-9]+$/),
  category: z.string().min(1)
});

const validatedParams = paramsSchema.parse(useParams());

推荐在生产环境中使用方法三，既保证类型安全又便于维护。