web-dev-qa-db-ja.com

プログラムで/ HashRouterをナビゲートする

私はもともと_react-router_からhashHistoryを使用し、プログラムでthis.props.history.Push()を使用してReactアプリをナビゲートしていました。しかし、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');
  ...
}
_
reactjsreact-routerreact-router-v4react-router-dom
5
Mike

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

ただし、 withRoute高階コンポーネント を使用して、これらの小道具を明示的に取得できます。次のようにエクスポートする前に、コンポーネントをこのHoCでラップする必要があります。

export default withRouter(SignUpForm);

SignUpFormがhistory propを取得するため、期待どおりに機能するようになりました。

6
Tharaka Wijebandara

私は自分の問題が何であるかを理解しました。私のindex.jsは、ルートの1つとしてApp.jsnot-を使用して（以下で）そのように設定されています。 SignUpForm.js、これはApp.jsでレンダリングされるコンテナーです。これは、SignUpForm.jsにApp.js内のhistory propの概念がないことを意味します。

App.jsの履歴小道具をSignUpForm.jsに小道具として渡すことで、SignUpForm内でthis.props.history.Push()を呼び出すことができました。 js希望のアクションを取得します。

0
Mike