React-router-dom Navigate组件跳转失效，useNavigate可正常工作求助

核心原因 #

• Navigate是React组件，只有在React渲染流程内返回并被渲染时，才会触发路由跳转逻辑。但你是在axios的then异步回调里返回它——此时组件的渲染周期已经结束，这个返回的组件根本不会被React处理，自然没法触发重定向。
• useNavigate是React Router提供的路由操作钩子，它直接操控浏览器的路由历史栈，不管是同步还是异步代码中调用，都能直接触发路由跳转，不受React渲染周期的限制，所以在异步回调里调用就能正常生效。

解决方案1：改用useNavigate实现跳转 #

首先在组件内获取navigate函数：

const navigate = useNavigate();

然后修改axios回调逻辑：

axios.get(`${REACT_APP_EXPRESS_BACKEND_URL}/authroute/verifyjwt`, {
  headers: {
    Authorization: `Bearer ${auth?.accessToken}`,
  },
  withCredentials: true,
})
.then((res) => {
  if (res?.data?._id) {
    dispatch(
      userLoggedIn({
        accessToken: auth.accessToken,
        profile: auth.profile,
        user: auth.user,
        timestamp: auth?.timestamp,
      })
    );
  } else {
    dispatch(userLoggedOut());
    localStorage.removeItem("accessToken");
    // 直接调用navigate触发跳转
    navigate("/login", { state: { from: location }, replace: true });
  }
})

解决方案2：用状态控制Navigate组件渲染 #

如果想保留使用Navigate组件的方式，可以通过状态触发组件重渲染：

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

// 在组件内定义状态
const [needRedirect, setNeedRedirect] = useState(false);
const [redirectConfig, setRedirectConfig] = useState({ to: '', state: {} });

// 修改axios回调
axios.get(`${REACT_APP_EXPRESS_BACKEND_URL}/authroute/verifyjwt`, {
  headers: {
    Authorization: `Bearer ${auth?.accessToken}`,
  },
  withCredentials: true,
})
.then((res) => {
  if (res?.data?._id) {
    dispatch(
      userLoggedIn({
        accessToken: auth.accessToken,
        profile: auth.profile,
        user: auth.user,
        timestamp: auth?.timestamp,
      })
    );
  } else {
    dispatch(userLoggedOut());
    localStorage.removeItem("accessToken");
    // 设置重定向状态
    setRedirectConfig({
      to: '/login',
      state: { from: location }
    });
    setNeedRedirect(true);
  }
})

// 在组件渲染部分判断状态
if (needRedirect) {
  return <Navigate to={redirectConfig.to} state={redirectConfig.state} replace />;
}

return children;

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