以編程方式導航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

回答

相關問題