以编程方式导航w/HashRouter

我最初使用hashHistory从react-router，并以编程方式导航使用this.props.history.push()的我的React应用程序。但随着从react-router-dom包使用HashRouter，this.props.history.push()现在抛出Cannot read property 'push' of undefined错误。以编程方式导航w/HashRouter

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

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'); 
    ... 
}

来源

2017-05-26 Mike

''history.push（）'仍然存在于react-router v4中。但可能无法使用，具体取决于您在何处使用以及如何配置路线。如果您可以分享更多解释这些内容的代码，我们可能会给您一个可靠的答案。 –

@TharakaWijebandara，只是增加了相关的代码。 – Mike

您在哪里尝试在Landing组件内使用'this.props.history.push（）'？ –

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

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

export default withRouter(SignUpForm);

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

来源

2017-05-30 16:29:06

如果我已经实现了REDX，我将如何包装组件？（mapStateToProps）（SignUpForm）;' – Mike

@Mike用连接组件'与连接组件'（连接（...）（MyComponent））' –

我已经想通了，我的问题是什么。我的index.js与App.js作为路线之一，不SignUpForm.js，这是一个容器正在App.js渲染设置为这样的（下文）。这意味着SignUpForm.js没有历史支柱的概念在App.js。

通过传递App.js的历史道具SignUpForm.js为道具，我能叫this.props.history.push()内SignUpForm.js得到我想要的动作。

来源

2017-05-30 16:26:09 Mike

这适用于直接子组件。但有时候你必须将历史记录降低许多级别。然后使用'withRouter'很简单，干净。 –

以编程方式导航w/HashRouter

回答

相关问题