React：如何在应用的函数中实现页面重定向？

我明白你遇到的问题了——因为你的logout函数和Router同级，没有被Router的上下文包裹，所以直接用this.props.history.push会报错，毕竟它根本拿不到history对象。下面给你几种靠谱的解决办法：

方法一：自定义全局History实例（最适合同级函数的场景） #

这个方法能让你的logout函数直接访问到应用全局的history对象，步骤很简单：

1. 首先创建一个单独的history文件（比如src/history.js）：

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

如果还没装history包，记得先跑npm install history或者yarn add history

2. 在你的根组件里，用这个自定义的history实例替换默认的Router配置：

import { Router } from 'react-router-dom'; // 注意这里是Router，不是BrowserRouter
import history from './history';
import YourRoutes from './routes';

function App() {
  return (
    <Router history={history}>
      <YourRoutes />
      {/* 其他组件 */}
    </Router>
  );
}

3. 现在你的logout函数就可以直接导入这个history实例来重定向了：

import history from './history';

const logout = () => {
  // 先处理登出逻辑：清除token、用户信息等
  localStorage.removeItem('userToken');
  sessionStorage.clear();
  
  // 然后执行重定向
  history.push('/');
};

方法二：将History/Navigate作为参数传递给logout函数 #

如果不想自定义全局history，也可以在被Router包裹的组件里拿到history对象，再把它传给logout函数：

如果你用的是函数组件（React Router v5） #

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

function LayoutComponent() {
  const history = useHistory();
  
  // 这里的logout函数可以传递给子组件
  const handleLogout = () => {
    // 登出逻辑
    localStorage.removeItem('userToken');
    // 用拿到的history重定向
    history.push('/');
  };
  
  return (
    <div>
      <Header logout={handleLogout} />
      {/* 页面内容 */}
    </div>
  );
}

如果是React Router v6 #

v6里把useHistory换成了useNavigate，用法类似：

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

function LayoutComponent() {
  const navigate = useNavigate();
  
  const handleLogout = () => {
    localStorage.removeItem('userToken');
    navigate('/');
  };
  
  return <Header logout={handleLogout} />;
}

为什么之前的方法会报错？ #

简单说，this.props.history只有在被Router组件直接或间接包裹的组件里才能拿到，因为Router会通过上下文把history对象传递给子组件。而你的logout函数和Router同级，不在这个上下文里，自然拿不到history，所以会出现Cannot read property 'push' of undefined的错误。

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