react-router@6中如何实现条件不满足时的React页面重定向？

数据老陈

2026-7-30

React Router v6 条件重定向实现方案

在React Router v6中，直接在组件体调用redirect是无效的——v6已移除该函数，且组件渲染阶段不允许直接执行导航这类副作用操作。以下两种方案可实现你需要的条件重定向：

方案1：条件渲染`Navigate`组件

这是最简洁的同步状态判断方案，直接在JSX中根据条件返回导航组件：

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

const Basket = () => {
  // 替换为你的实际用户状态
  const currentUser = null;

  // 用户不存在时触发重定向
  if (!currentUser) {
    return <Navigate to="/login" replace />;
  }

  // 用户存在时渲染购物篮内容
  return (
    <div className="box">
      <h2>Basket</h2>
    </div>
  );
}

export default Basket;

方案2：`useNavigate`钩子 + `useEffect`

适合需要执行异步操作（比如调用权限校验接口）后再导航的场景：

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

const Basket = () => {
  const navigate = useNavigate();
  // 替换为你的实际用户状态
  const currentUser = null;

  useEffect(() => {
    // 组件加载时判断用户状态，不存在则导航
    if (!currentUser) {
      navigate("/login", { replace: true });
    }
  }, [currentUser, navigate]);

  // 用户存在时渲染内容，重定向过程可返回加载态或null
  if (!currentUser) return null;
  
  return (
    <div className="box">
      <h2>Basket</h2>
    </div>
  );
}

export default Basket;