v6版本升级后路由参数验证问题记录

在将项目从React Router v5升级到v6版本后，遇到了一个关于路由参数验证的问题。升级后发现，原本在v5中通过match.params获取的参数，在v6中需要使用新的useParams Hook来获取。

问题复现

在v5中，我们通常这样获取路由参数：

const MyComponent = ({ match }) => {
  const { id } = match.params;
  // 处理逻辑
};

升级到v6后，上述代码会报错，因为match对象不存在了。正确的做法是使用：

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

const MyComponent = () => {
  const params = useParams();
  const { id } = params;
  // 处理逻辑
};

参数验证问题

但在实际应用中，我们发现当路由参数缺失或类型不正确时，useParams()返回的参数可能为空或格式错误。为了增强健壮性，我们需要添加参数验证逻辑：

const MyComponent = () => {
  const params = useParams();
  
  // 参数验证
  if (!params.id || isNaN(params.id)) {
    // 处理无效参数
    return <div>Invalid ID</div>;
  }
  
  const id = parseInt(params.id);
  // 继续处理
};

解决方案

为了解决这个问题，我们封装了一个自定义Hook来处理参数验证：

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

const useValidatedParams = (validators) => {
  const params = useParams();
  
  for (const [key, validator] of Object.entries(validators)) {
    if (!validator(params[key])) {
      return { isValid: false, error: `${key} validation failed` };
    }
  }
  
  return { isValid: true, params };
};

// 使用示例
const MyComponent = () => {
  const { isValid, params, error } = useValidatedParams({
    id: (id) => id && !isNaN(id),
    category: (cat) => cat && typeof cat === 'string'
  });
  
  if (!isValid) return <div>{error}</div>;
  
  // 正常处理
};