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

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

前回の記事はこちら → [__ReactとFirebaseでギターマニアのためのSNSを作った話__](https://qiita.com/roki_na/items/b79c9a84cd847b0cd92e)

# react-router-dom
https://www.npmjs.com/package/react-router-dom

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

# とりあえずアップデートしてみる
```zsh: コンソール
mynewgear % ncu -u react-router-dom

 react-router-dom  ^5.3.0  →  ^6.3.0

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

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

```zsh: ターミナル
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__ からエクスポートされていないみたいです。

エラーが出ているのは下記のファイルですね。
```tsx: 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__ で非推奨になったみたいでした。
いろいろと書き換えます。
```tsx: 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;
```
それに伴ってコンポーネントの読み込み部分も書き換える必要があります。
```diff_tsx: App.tsx
- <Router>
-   <ScrollToTop>
-     <Header />
-     <main>
-     </main>
-     <Footer />
-   </ScrollToTop>
- </Router>

+ <Router>
+   <ScrollToTop />
+   <Header />
+   <main>
+   </main>
+   <Footer />
+ </Router>
```
読み込み部分も書き換え __withRouter__ のエラーは解消しました。

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

```zsh: コンソール
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__ を削除しました。
```diff_tsx: App.tsx
- <Route exact path="/" component={MainPage} />
+ <Route path="/" component={MainPage} />
```

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

```zsh: コンソール
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__ の記法に合わせて書き換えます。
```diff_tsx: App.tsx
- <Route path="/" component={MainPage} />
+ <Route path="/" element={<MainPage />} />
```
また、 __Route__ の親は __Routes__ で囲う必要があるとのこと
```diff_tsx: App.tsx
<Router>
  <ScrollToTop />
  <Header />
  <main>
+   <Routes>
      <Route path="/" element={<MainPage />} />
      ...
+   </Routes>
  </main>
  <Footer />
</Router>
```

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

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

# これから

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