React编程式重定向失效求助（附简化代码）

嘿，我来帮你搞定这个重定向失效的问题～

你遇到的核心问题是你的App组件没有获取到history props，所以调用this.props.history.push()自然没效果。React Router只会给直接被<Route>组件渲染的组件自动注入history、location这些路由相关的props，而你的App看起来是作为<Router>的直接子组件，并没有被<Route>包裹，所以this.props.history其实是undefined。

下面给你两种可行的解决方案：

方案1：用withRouter高阶组件包裹App #

withRouter是React Router提供的高阶组件，它可以把路由相关的props注入到任何组件中，不管这个组件是不是被Route直接渲染。

步骤如下：

1. 先导入withRouter：

import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom";

2. 用withRouter包裹你的App组件再导出：

class App extends React.Component {
  // ...你的组件逻辑
  login(loginResponse) {
    // ...你的登录逻辑
    this.props.history.push('/some-path/'); // 现在应该能正常生效了
  }
}

export default withRouter(App);

方案2：把App放在<Route>中渲染 #

调整你的路由结构，让App作为<Route>的component属性值，这样React Router就会自动给它注入history props：

<Router>
  <Switch>
    <Route path="/" component={App} />
    <Route path="/login" component={Login} />
    {/* 其他路由规则 */}
  </Switch>
</Router>

额外注意点：确保this指向正确 #

如果你的login方法是作为回调传递给子组件（比如Login组件），一定要确保this的指向是App组件本身，不然也会出现this.props.history找不到的情况。可以通过两种方式绑定：

• 在构造函数中绑定：

constructor(props) {
  super(props);
  this.login = this.login.bind(this);
}

• 用箭头函数定义方法：

login = (loginResponse) => {
  // ...你的登录逻辑
  this.props.history.push('/some-path/');
}

按照上面的方法调整后，你的编程式重定向应该就能正常工作啦～

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