使用HashRouter以编程方式导航

Question

我最初使用hashHistory来自，react-router并使用来以编程方式导航我的React应用this.props.history.push()。但是随着HashRouter从react-router-dom软件包的使用开始，this.props.history.push()现在会引发Cannot read property 'push' of undefined错误。

HashRouter现在如何以编程方式导航？

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider>
      <HashRouter>
        <div>
          <Route exact path="/" component={App} />
          <Route path="/landing" component={Landing} />
        </div>
      </HashRouter>
    </MuiThemeProvider>
  </Provider>,
document.getElementById('root'));

App.js的渲染功能

render() {
  return (
    <div className="App">
      ...
      <div>
        <Collapse isOpened={this.state.activeForm === 1}>
          <SignUpForm />
        </Collapse>
        <Collapse isOpened={this.state.activeForm === 2}>
          <SignInForm />
        </Collapse>
      ...
    </div>
  );
}

SignUpForm.js中正在调用的函数.push()

handleSubmit(e) {
  ...
  this.props.history.push('/landing');
  ...
}

Answer 1

如果您的组件是从路线（如应用程序和着陆）渲染，那么你将有机会获得所有路由器相关的道具（match，history，location）。但是，由于SignUpForm并未随路线呈现，因此默认情况下您将无权访问这些道具。

但是我们可以使用withRoute高阶分量来显式地获取那些道具。我们只需要用此HoC包装组件，然后按如下所示导出它。

export default withRouter(SignUpForm);

现在它可以按预期运行，因为SignUpForm得到了history支持。