ReactJs中this.props.history.push()失效，登出后无法重定向至登录组件

嘿，作为React新手遇到这个问题太正常啦，我来帮你梳理下问题所在和解决办法～

1. 核心问题：App组件没拿到history对象 #

history这个prop是React Router通过<Route>组件或者withRouter高阶组件注入的，如果你的App组件没经过这两种方式处理，this.props.history会是undefined，自然调用push()没反应。

方案A：用withRouter包裹App组件 #

这是最直接的修复方式，不管App是不是被Route渲染，都能注入路由相关的props：

// 在你的App组件文件中
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class App extends Component {
  componentWillUpdate(nextProps, nextState) {
    // 只在登出状态变化时触发重定向
    if (nextState.isLoggedOut !== this.state.isLoggedOut && nextState.isLoggedOut) {
      this.props.history.push('/login');
    }
  }

  // 其他组件逻辑...
}

// 用withRouter包裹后导出组件
export default withRouter(App);

方案B：让App通过<Route>渲染 #

如果你的路由结构允许，可以把App作为根路径的组件，这样Route会自动注入history：

// Routes.js文件中
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Login from './path/to/Login';
import App from './path/to/App';

const Routes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/login" component={Login} />
      {/* 将App作为根路径的路由组件 */}
      <Route path="/" component={App} />
    </Switch>
  </BrowserRouter>
);

export default Routes;

2. 调整生命周期钩子的使用 #

componentWillUpdate在React 16.3+已经被标记为不安全的钩子，在里面调用history.push()容易触发重复更新循环。推荐改用componentDidUpdate，它在组件更新完成后执行，更安全：

componentDidUpdate(prevProps, prevState) {
  // 仅当登出状态从false变为true时执行重定向
  if (!prevState.isLoggedOut && this.state.isLoggedOut) {
    this.props.history.push('/login');
  }
}

3. 更直观的登出处理方式 #

其实没必要在生命周期里检测登出事件，直接在登出按钮的处理函数里完成逻辑+重定向更简单：

handleLogout = () => {
  // 执行登出逻辑：清除用户信息、token等
  this.setState({ isLoggedOut: true });
  // 直接在这里调用重定向
  this.props.history.push('/login');
}

// 在按钮上绑定方法
<button onClick={this.handleLogout}>登出</button>

最后检查点 #

• 确保整个应用都被<BrowserRouter>（或HashRouter）包裹，不要漏掉外层的Router组件；
• 确认/login路径在Routes.js中已经配置了对应的<Route>组件。

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