最新のreact-router-domを使いたい（v5からv6へのアップデート）

前回、機材共有SNSを作成した記事を書きました。
今回はそれに使われている react-router-dom を最新版にアップデートした話です。

前回の記事はこちら → ReactとFirebaseでギターマニアのためのSNSを作った話

react-router-dom

React のルーティング用のパッケージですね。
React をさわっている方は大体使ったことあるのでは？というくらい有名なので説明は割愛します。
今回はこれを v5系 から v6系 にアップデートします。

とりあえずアップデートしてみる

コンソール

mynewgear % ncu -u react-router-dom

 react-router-dom  ^5.3.0  →  ^6.3.0

mynewgear % npm i

npm-check-updates でバージョンを確認して
npm iで問題なくインストール完了

ダメ元でローカル環境を起動してみる

ターミナル

mynewgear % npm start

Failed to compile.

./src/components/ScrollToTop.tsx
Attempted import error: 'withRouter' is not exported from 'react-router-dom'.

だめでした。
withRouter が react-router-dom からエクスポートされていないみたいです。

エラーが出ているのは下記のファイルですね。

ScrollToTop.tsx

import { Component } from "react";
import { withRouter } from "react-router-dom";

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop);

調べてみると withRouter は v6 で非推奨になったみたいでした。
いろいろと書き換えます。

ScrollToTop.tsx

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

それに伴ってコンポーネントの読み込み部分も書き換える必要があります。

App.tsx

- <Router>
-   <ScrollToTop>
-     <Header />
-     <main>
-     </main>
-     <Footer />
-   </ScrollToTop>
- </Router>

+ <Router>
+   <ScrollToTop />
+   <Header />
+   <main>
+   </main>
+   <Footer />
+ </Router>

読み込み部分も書き換え withRouter のエラーは解消しました。

コンソールを見ると新たなエラーが出ています。
例のごとく v6 では exact は使えないみたいです。

コンソール

Failed to compile.

/Users/user/Git/mynewgear/src/App.tsx
TypeScript error in /Users/user/Git/mynewgear/src/App.tsx(42,18):
Type '{ exact: true; path: string; component: () => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
  Property 'exact' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.  TS2322

    40 |         <Header />
    41 |         <main className="text-white px-[80px] py-[50px] bg-black min-h-[calc(100vh-94px)] lg:px-[50px] md:px-[15px] md:py-[20px]">
  > 42 |           <Route exact path="/" component={MainPage} />
       |                  ^
    43 |           <Route path="/mypage/" component={MyPage} />
    44 |           <Route path="/terms/" component={Terms} />
    45 |           <Route path="/privacy/" component={Privacy} />

exact を削除しました。

App.tsx

- <Route exact path="/" component={MainPage} />
+ <Route path="/" component={MainPage} />

次は component がなんとかかんとかと言われています。

コンソール

Failed to compile.

/Users/user/Git/mynewgear/src/App.tsx
TypeScript error in /Users/user/Git/mynewgear/src/App.tsx(42,27):
Type '{ path: string; component: () => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
  Property 'component' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.  TS2322

    40 |         <Header />
    41 |         <main className="text-white px-[80px] py-[50px] bg-black min-h-[calc(100vh-94px)] lg:px-[50px] md:px-[15px] md:py-[20px]">
  > 42 |           <Route path="/" component={MainPage} />
       |                           ^
    43 |           <Route path="/mypage/" component={MyPage} />
    44 |           <Route path="/terms/" component={Terms} />
    45 |           <Route path="/privacy/" component={Privacy} />

指定の仕方が component から element に変更になったみたいです。
v6 の記法に合わせて書き換えます。

App.tsx

- <Route path="/" component={MainPage} />
+ <Route path="/" element={<MainPage />} />

また、 Route の親は Routes で囲う必要があるとのこと

App.tsx

<Router>
  <ScrollToTop />
  <Header />
  <main>
+   <Routes>
      <Route path="/" element={<MainPage />} />
      ...
+   </Routes>
  </main>
  <Footer />
</Router>

ここまで対応したらエラーが出なくなりました。

サイトの挙動も確認して問題なかったのでこれにてアプデ完了です！

これから

今後も React や Firebase など他のパッケージを順次アプデしていこうと思います。