react-routerをv6からv7にアップデートできた...

はじめに

これまで React Router v6 を使っていたのですが、最近アプリを起動すると以下のような黄色い警告が目立つようになってきました。

⚠️ "React Router v6 will be deprecated soon..."

そこで、思い切って React Router v7 にアップデートすることにしました。
しかし、v7は 2024/10/4 にプレリリースされたばかり ということもあり、ChatGPT や Gemini に質問しても情報が少なく、なかなかスムーズに解決できませんでした。

そこで、以下の記事を参考にして試行錯誤したところ、最終的に無事アップデートできたので備忘録として残しておきます。

参考: React Router 7 — Robin Wieruch

未解決の件

家計簿アプリで以下のようにしているのですが，MainLayout を別ファイルに切り出すと、なぜか表示されなくなってしまいます。

多分，ネストで解決するんだろうな...と思ってます．

import { Routes, Route, Outlet } from "react-router";
import MyRegister from "./MyRegister";
import MyTable from "./MyTable";
import MySetting from "./MySetting";
import NoMatch from "./NoMatch";
import MyHeader from "./MyHeader";
import { Box } from "@chakra-ui/react";

function App() {
  return (
    <>
      <Routes>
        <Route element={<MainLayout />}>
          <Route index element={<MyRegister />} />
          <Route path="MyTable" element={<MyTable />} />
          <Route path="MySetting" element={<MySetting />} />
        </Route>
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </>
  );
}

const MainLayout = () => {
  return (
    <>
      <Box bg="gray.200" minH="100vh">
        <MyHeader />
        <Outlet />
      </Box>
    </>
  );
};

export default App;

おわりに

• React Router v7は2024年10月にプレリリースされたばかり
• v6からv7へのアップデートで黄色い警告が消えた
• 基本はを使ったネスト構成でOK
• まだレイアウト分離で課題が残っている