v6路由跳转控制

React Router v6路由跳转控制实践

在React Router v6中，路由跳转控制相比v5有了显著变化。本文将详细介绍如何在v6中实现灵活的路由跳转控制。

v6路由跳转方式

1. 使用useNavigate Hook

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

function MyComponent() {
  const navigate = useNavigate();
  
  const handleNavigation = () => {
    // 跳转到指定路径
    navigate('/dashboard');
    
    // 带参数跳转
    navigate('/user/123', { state: { from: 'home' } });
    
    // 后退
    navigate(-1);
    
    // 前进
    navigate(1);
  };
}

2. 条件路由跳转控制

function ProtectedRoute() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const navigate = useNavigate();
  
  useEffect(() => {
    // 检查登录状态
    if (!isLoggedIn) {
      navigate('/login', { replace: true });
    }
  }, [isLoggedIn]);
  
  return isLoggedIn ? <Dashboard /> : <Login />;
}

3. 路由守卫实现

function App() {
  const [user, setUser] = useState(null);
  
  // 全局路由守卫
  const routeComponents = [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, requiresAuth: true }
  ];
  
  return (
    <Routes>
      {routeComponents.map((route) => {
        if (route.requiresAuth && !user) {
          return <Route key={route.path} path={route.path} element={<Navigate to="/login" replace />} />;
        }
        return <Route key={route.path} path={route.path} element={<route.component />} />;
      })}
    </Routes>
  );
}