[解決済み] react-router-domのwithRouterは何のためにあるのですか？

質問

私は 時々見かける でコンポーネントを包んでいます。 withRouter をエクスポートするときに使用します。

import { withRouter } from 'react-router-dom';

class Foo extends React.Component {
  // ...
}

export default withRouter(Foo);

これは何に使うのか、どんなときに使うのか？

どのように解決するのですか？

アプリにメインページコンポーネントを含める場合、多くの場合、そのコンポーネントは <Route> コンポーネントを使用します。

<Route path="/movies" component={MoviesIndex} />

こうすることで MoviesIndex コンポーネントは this.props.history でユーザーをリダイレクトすることができます。 this.props.history.push .

一部のコンポーネント（一般的にはヘッダーコンポーネント）は、すべてのページに表示されるため <Route> :

render() {
  return (<Header />);
}

これは、ヘッダーがユーザーをリダイレクトできないことを意味します。

この問題を回避するために、ヘッダーコンポーネントを withRouter 関数がエクスポートされるときに、どちらか一方を使用します。

export default withRouter(Header)

これは Header コンポーネントにアクセスすることができます。 this.props.history で、これはヘッダーがユーザーをリダイレクトできるようになったことを意味します。