history.push('/')与<Redirect to="/" />的区别及登出跳转问题咨询

嘿，我来帮你把这两个跳转方式的区别说清楚，再看看你的登出按钮代码怎么调整才能实现需求~

这俩都是React Router里的跳转方式，但本质上是完全不同的实现逻辑：

• 执行逻辑不一样

  • history.push("/") 是命令式跳转——你可以把它当成一个普通的JS函数，在任何你需要的地方调用它，比如点击按钮的回调、异步接口请求完成后。它是你主动触发的操作，直接修改浏览器的历史记录栈，跳转到目标路由。
  • <Redirect to="/" /> 是声明式组件——它是一个React组件，只有当它被渲染到DOM树里的时候，才会触发跳转。通常用在路由组件的渲染逻辑里，比如判断用户未登录时，直接渲染这个组件跳转到登录页。

• 历史栈的控制差异

  • 两者默认都会往历史栈里新增一条记录，用户点浏览器后退能回到之前的页面。如果想替换当前的历史记录（比如登录成功后不想让用户退回到登录页），history.push对应的是history.replace方法；<Redirect>则可以通过push={false}属性实现（默认push={true}，等价于push）。

• 适用场景不同

  • 当你需要在事件处理、异步回调里触发跳转时，选history.push就对了，比如点击登出按钮、接口返回成功后跳转。
  • 当你需要在组件渲染流程中根据状态自动跳转时，用<Redirect>更合适，比如路由守卫里判断用户权限，未登录就自动跳转到登录页。

先说说你当前代码的问题：你在signout的回调里返回了<Redirect />组件，但这个回调函数里返回的组件根本不会被React渲染，所以完全不会触发跳转。signout应该是用来处理登出逻辑（比如清除token、用户信息）的函数，它的回调只是用来执行登完成后的后续操作，不是用来返回React元素的。

下面给你两种可行的修改方案，根据你用的React Router版本选：

方案1：React Router v5 使用useHistory钩子 #

如果你的项目用的是v5版本，直接用useHistory拿到history对象，在登出完成后调用push跳转：

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

function YourNavComponent() {
  const history = useHistory();

  const handleSignout = () => {
    // 先执行你的登出逻辑，比如清除本地存储的用户信息、token
    signout(() => {
      // 登出完成后，主动调用history.push跳转到首页
      history.push("/");
    });
  };

  // 假设isAuthenticated是判断用户是否登录的变量，比如从全局状态或localStorage获取
  return (
    <>
      {isAuthenticated && (
        <li className="nav-item">
          <span className="nav-link text-warning" onClick={handleSignout}>
            Signout
          </span>
        </li>
      )}
    </>
  );
}

方案2：React Router v6 使用useNavigate钩子 #

如果是v6版本，useHistory被替换成了useNavigate，用法差不多：

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

function YourNavComponent() {
  const navigate = useNavigate();

  const handleSignout = () => {
    signout(() => {
      // 用navigate替代history.push
      navigate("/");
    });
  };

  return (
    <>
      {isAuthenticated && (
        <li className="nav-item">
          <span className="nav-link text-warning" onClick={handleSignout}>
            Signout
          </span>
        </li>
      )}
    </>
  );
}

另外，关于“用户已认证时显示登出按钮”的需求，你只需要根据你的认证状态变量（比如isAuthenticated）做条件渲染就可以了，上面的代码里已经包含了这个逻辑~

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