v6路由参数校验方法

React Router v6路由参数校验方法

在React Router v6中，路由参数校验成为开发中的重要环节。本文将详细介绍如何在v6版本中实现路由参数的有效性校验。

基础参数校验

首先，在Route组件中使用useParams Hook获取路由参数，并进行基础校验：

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

function UserPage() {
  const { userId } = useParams();
  const navigate = useNavigate();
  
  useEffect(() => {
    if (!userId || isNaN(userId)) {
      navigate('/error');
    }
  }, [userId, navigate]);
  
  return <div>User ID: {userId}</div>;
}

自定义Hook校验

创建可复用的参数校验Hook：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function useRouteValidation(validationFn, redirectPath) {
  const navigate = useNavigate();
  
  useEffect(() => {
    if (!validationFn()) {
      navigate(redirectPath);
    }
  }, [validationFn, navigate]);
}

// 使用示例
function ProductPage() {
  const { productId } = useParams();
  
  useRouteValidation(
    () => productId && productId.length === 12,
    '/invalid'
  );
  
  return <div>Product ID: {productId}</div>;
}

路由层级校验

在路由配置中添加校验逻辑：

import { Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route 
        path="/user/:userId" 
        element={<UserPage />} 
      />
      <Route 
        path="/user/*" 
        element={<Navigate to="/error" />} 
      />
    </Routes>
  );
}

通过以上方法，可以有效保障路由参数的正确性，提升应用健壮性。