7

我最初使用hashHistoryfromreact-router并以编程方式使用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');
  ...
}
4

2 回答 2

8

如果您的组件是从 Route 渲染的（例如 App 和 Landing），那么您将可以访问所有与路由器相关的 props ( match, history, location)。但是，由于 SignUpForm 没有使用 Route 呈现，因此默认情况下您将无法访问这些道具。

但是我们可以使用withRoute高阶组件来显式地获取这些道具。我们只需要在导出之前用这个 HoC 包装组件，如下所示。

export default withRouter(SignUpForm);

现在它将按预期工作，因为 SignUpForm 获得了history道具。

于 2017-05-30T16:29:06.297 回答
0

我已经弄清楚我的问题是什么。我的index.js是这样设置的（如下），其中App.js作为路由之一，而不是 SignUpForm.js，后者是在App.js中呈现的容器。这意味着SignUpForm.js在App.js中没有历史道具的概念。

通过将App.js的历史道具作为道具传递给SignUpForm.js，我能够this.props.history.push()在SignUpForm.js中调用以获得我想要的操作。

于 2017-05-30T16:26:09.337 回答