reactjs - 使用 HashRouter 以编程方式导航

Question

我最初使用 react-router 中的 hashHistory 并使用 this.props.history.push() 以编程方式导航我的 React 应用程序。但随着转向使用 react-router-dom 包中的 HashRouter，this.props.history.push() 现在会抛出 无法读取未定义的属性“push”错误。

现在如何使用 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

如果您的组件是从路线渲染的(例如应用程序和着陆)，那么您将可以访问所有与路由器相关的 Prop (match、history、位置)。但是，由于 SignUpForm 不是使用 Route 渲染的，因此默认情况下您将无权访问这些 props。

但是我们可以使用withRoute higher-order component明确获取这些 Prop 。我们只需使用此 HoC 包装组件，然后再导出它，如下所示。

export default withRouter(SignUpForm);

现在，由于 SignUpForm 获得了 history 属性，它将按预期工作。