路由跳转控制：v6实现思路

在React Router v6中实现路由跳转控制是升级过程中的核心环节。本文将详细介绍v6版本的路由跳转实现思路。

核心变化

v6相比v5最大的变化是移除了Switch组件，改用Routes。同时，useHistory被useNavigate替代，这直接影响了路由跳转的实现方式。

基础跳转实现

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

function MyComponent() {
  const navigate = useNavigate();
  
  const handleRedirect = () => {
    navigate('/target-path');
    // 或者带参数跳转
    navigate('/user/123', { replace: true });
  };
  
  return (
    <button onClick={handleRedirect}>跳转</button>
  );
}

条件跳转控制

function ProtectedRoute() {
  const navigate = useNavigate();
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login', { replace: true });
    }
  }, [isAuthenticated]);
  
  return isAuthenticated ? <Outlet /> : null;
}

高级跳转控制

通过自定义Hook封装跳转逻辑：

function useAuthNavigate() {
  const navigate = useNavigate();
  
  const authNavigate = (path, options = {}) => {
    // 添加权限检查逻辑
    if (checkPermission()) {
      navigate(path, options);
    } else {
      navigate('/unauthorized');
    }
  };
  
  return authNavigate;
}

实际应用

在实际项目中，建议将跳转逻辑封装到全局Context或自定义Hook中，便于统一管理和维护。通过v6的useNavigate可以灵活实现各种跳转场景，包括带参数、替换历史记录等操作。