プログラムでHashRouterを使用してナビゲート

Question

私はもともとhashHistoryをreact-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')); 

私は私の問題が何であるかを考え出した.push()

handleSubmit(e) { 
    ... 
    this.props.history.push('/landing'); 
    ... 
} 

Answer 1

コンポーネントがルートからレンダリングされている場合（App and Landingなど）、すべてのルータ関連の小道具（match、history、location）にアクセスできます。しかし、SignUpFormはRouteでレンダリングされないので、デフォルトではそれらの小道具にアクセスすることはできません。

しかし、withRoute higher-order componentを使用すると、これらの小道具を明示的に取得できます。次のようにエクスポートする前に、コンポーネントをこのHoCにラップするだけです。

export default withRouter(SignUpForm); 

SignUpFormがhistory propを取得するので、期待通りに動作します。

Answer 2

を呼んだSignUpForm.jsで

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のFUNCをレンダリングします。私index.js容器がApp.jsでレンダリングされているApp.js経路の1つとして、ないSignUpForm.js、とそのような（以下）として設定されています。つまり、SignUpForm.jsには、履歴プロフムApp.jsの概念はありません。

小道具としてSignUpForm.jsにApp.jsの歴史の小道具を渡すことによって、私は私の目的のアクションを取得するためにSignUpForm.js内this.props.history.push()を呼び出すことができました。