Question

我最初使用react-router中的this.props.history.push()并使用HashRouter以编程方式导航我的React应用。但是，随着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'));进行导航？

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

渲染 App.js

的功能

.push()

正在调用handleSubmit(e) { ... this.props.history.push('/landing'); ... }

的 SignUpForm.js 中的功能

yum install -y  curl tar createrepo && yum clean all

Answer 1

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

但我们可以使用withRoute higher-order component来明确获取这些道具。我们只需要在导出之前用这个HoC包装组件，如下所示。

export default withRouter(SignUpForm);

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

Answer 2

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

将 App.js 的历史道具传递给 SignUpForm.js 作为道具，我能够在this.props.history.push() > SignUpForm.js 以获得我想要的行动。

以编程方式导航w / HashRouter

2 个答案: