React Router Dom中redirect函数无法跳转问题求助

以下是关键原因和解决方案：

• redirect函数的使用场景不对
  要是你用的是React Router v6，redirect()根本不是给组件副作用用的——它是设计用于路由loader、action或者路由配置里的跳转逻辑。在useEffect这种异步回调里调用，完全不在路由的处理流程中，自然不会触发页面跳转。

• 未授权的判断逻辑有问题
  后端返回401未授权时，你的OS_Service.getAll大概率不会返回null，而是会返回一个带401状态码的响应对象。你现在用!response来判断，这个条件几乎永远不会成立，跳转代码根本没执行。应该改成检查响应状态，比如response.status === 401或者!response.ok（response.ok仅在状态码200-299时为true）。

• 正确的实现方式
  组件内实现路由跳转，得用React Router提供的useNavigate钩子。具体步骤：

  1. 导入useNavigate并在组件内初始化
  2. 用navigate('/unauthorized')替换原来的redirect
  3. 修正响应判断逻辑，精准识别未授权场景

修改后的代码示例：

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

const YourComponent = () => {
  const [allServiceOrders, setAllServiceOrders] = useState([]);
  const [fetching, setFetching] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
    const populateData = async () => {
      try {
        const response = await OS_Service.getAll('user.token');

        // 准确判断未授权状态
        if (!response.ok || response.status === 401) {
          return navigate('/unauthorized');
        }

        setAllServiceOrders(response.data);
        setFetching(false);
      } catch (error) {
        // 处理请求失败的情况，比如网络错误，按需跳转
        navigate('/unauthorized');
      }
    };

    populateData();
  }, [setAllServiceOrders, user, navigate]);

  // 组件渲染内容...
};

内容的提问来源于stack exchange，提问作者Alojarf