モジュール '"react-router-dom"' にエクスポートされたメンバー 'withRouter' がありません。

Question

import { withRouter } from 'react-router-dom';
上記をインポートする際に、下記のエラーが発生。
「モジュール '"react-router-dom"' にエクスポートされたメンバー 'withRouter' がありません。」

解決方法、原因がわからないので教えていただきたいです。
よろしくお願いいたします。

Comments

[hoshi-takanori]

Hooks API を使うと良いのでは。
https://numb86-tech.hatenablog.com/entry/2019/11/03/184813

Answer 1

自分も以前、react-router を使ったことがありますが、その当時は、まだフックがない頃でしたので、withRouterHOCを使っていました。その後、最新をキャッチアップしていませんでしたが調べてみると、最新のバージョンでは、withRouterは無くなったようです。現時点のAPI Reference にも、withRouter は見当たらないです。

v5.1の登場時には、withRouter をフックに置き換えることを推奨する記事が、React Routerの開発サイドから投稿されています。

• React Router v5.1 @reacttraining.com (Sep 25th, 2019)

If you'd like to do even more, go ahead and:

・ Replace any withRouter usage with hooks. They give you access to all the same stuff. Again, although withRouter is not deprecated in 5.1, it's a weird API when you can compose your state with hooks instead. It will also most likely be deprecated in a future release.

（※太字による強調は当方で付けたものです）

上記の最後に

It will also most likely be deprecated in a future release.

とあって、将来withRouterは非推奨になるとの予測どおり、現行バージョンでは非推奨ではなく廃止になっています。
「v6になっても、withRouterが欲しいです」という要望が issueにありました が、react-routerのコラボレイターから却下されていますね。

上記をふまえて最新バージョンを使うならば

・Replace any withRouter usage with hooks.

に従って、useLocation や useNavigate などのフックに移行する必要があり、withRouter をどうしても使いたいのであれば、v5.1以前のreact-routerを使うか、もしくは上記のissueのコード例にあるようなwithRouterを自作する必要があります。