Switch to React Router v7 from Reach Router v1

packages/frontend/package.json

@@ -17,7 +17,8 @@
     "p-event": "^6.0.1",
     "react": "19.0.0",
     "react-bootstrap": "1.4.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.0.0",
+    "react-router-dom": "7.1.1"
   },
   "scripts": {
     "prepare:frontend": "cd .. && yarn prepare:frontend",

packages/frontend/src/Routes.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from "react";
-import { Router } from "@reach/router";
+import { BrowserRouter as  Router,Route ,Routes as ReactRoutes} from "react-router-dom";
 
 const ListNotes = lazy(() => import("./content/ListNotes"));
 const CreateNote = lazy(() => import("./content/CreateNote"));
@@ -10,13 +10,15 @@ const Routes = () => (
   <div className="mt-md-4 d-flex flex-column justify-content-center">
     <Suspense fallback={<div>Loading...</div>}>
       <Router>
-        <ListNotes path="/" />
-        <CreateNote path="/note/new" />
-        <ShowNote path="/notes/:noteId" />
-        <NotFound default />
+        <ReactRoutes>
+          <Route path="/" element={<ListNotes />} />
+          <Route path="/note/new" element={<CreateNote />} />  
+          <Route path="/notes/:noteId" element={<ShowNote />} />
+          <Route path="*" element={<NotFound />} />
+        </ReactRoutes>
       </Router>
     </Suspense>
   </div>
 );
 
-export { Routes };
+export { Routes };

packages/frontend/src/content/CreateNote.tsx

@@ -1,6 +1,6 @@
 import React, { useState, FormEvent, useTransition } from "react";
 import { Form, Button, Alert } from "react-bootstrap";
-import { navigate, RouteComponentProps } from "@reach/router";
+import { useNavigate } from "react-router-dom";
 import { GATEWAY_URL } from "../config";
 import { putObject } from "../libs";
 import { HomeButton, ButtonSpinner, PageContainer } from "../components";
@@ -9,7 +9,8 @@ import { PlayAudioButton } from "./PlayAudioButton";
 
 const MAX_FILE_SIZE = 2000000;
 
-const CreateNote = (props: RouteComponentProps) => {
+const CreateNote = () => {
+  const navigate = useNavigate();
   const [isPending, startTransition] = useTransition();
   const [errorMsg, setErrorMsg] = useState("");
   const [noteContent, setNoteContent] = useState("");

packages/frontend/src/content/DeleteNoteButton.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useTransition } from "react";
 import { Button, Alert } from "react-bootstrap";
 import { GATEWAY_URL } from "../config";
-import { navigate } from "@reach/router";
+import { useNavigate } from "react-router-dom";
 import { deleteObject } from "../libs";
 import { ButtonSpinner } from "../components";
 
 const DeleteNoteButton = (props: { noteId: string; attachment?: string }) => {
   const { noteId, attachment } = props;
   const [isDeleting, startTransition] = useTransition();
   const [errorMsg, setErrorMsg] = useState("");
-
+  const navigate = useNavigate();
   const handleDelete = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     startTransition(async () => {

packages/frontend/src/content/ListNotes.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useTransition, useEffect } from "react";
-import { Link, RouteComponentProps } from "@reach/router";
+import { Link} from "react-router-dom";
 import { GATEWAY_URL } from "../config";
 import { Card, Alert, CardColumns, Button } from "react-bootstrap";
 import { Loading, PageContainer } from "../components";
@@ -10,7 +10,7 @@ interface Note {
   attachment: boolean;
 }
 
-const ListNotes = (props: RouteComponentProps) => {
+const ListNotes = () => {
   const [isPending, startTransition] = useTransition();
   const [errorMsg, setErrorMsg] = useState("");
   const [notes, setNotes] = useState<Note[]>([]);

packages/frontend/src/content/NotFound.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import { RouteComponentProps } from "@reach/router";
 import { HomeButton, PageContainer } from "../components";
 
-const NotFound = (props: RouteComponentProps) => (
+const NotFound = () => (
   <PageContainer header={<HomeButton />}>404 Page Not Found</PageContainer>
 );
 

packages/frontend/src/content/SaveNoteButton.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useTransition } from "react";
 import { Button, Alert } from "react-bootstrap";
 import { GATEWAY_URL } from "../config";
-import { navigate } from "@reach/router";
+import { useNavigate } from "react-router-dom";
 import { ButtonSpinner } from "../components";
 
 const SaveNoteButton = (props: { noteId: string; noteContent: string }) => {
   const [isPending, startTransition] = useTransition();
   const [errorMsg, setErrorMsg] = useState("");
+  const navigate = useNavigate();
 
   const handleSave = async (event: any) => {
     event.preventDefault();

packages/frontend/src/content/ShowNote.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useTransition } from "react";
-import { RouteComponentProps, navigate } from "@reach/router";
+import { useParams, useNavigate } from "react-router-dom";
 import { Form, Card } from "react-bootstrap";
 import { GATEWAY_URL } from "../config";
 import { DeleteNoteButton, SaveNoteButton } from "./";
 import { getObjectUrl } from "../libs";
 import { HomeButton, Loading, PageContainer } from "../components";
 
-const ShowNote = (props: RouteComponentProps<{ noteId: string }>) => {
-  const { noteId } = props;
+const ShowNote = () => {
+  const { noteId } = useParams();
+  const navigate = useNavigate();
   const [isPending, startTransition] = useTransition();
   const [noteContent, setNoteContent] = useState("");
   const [attachment, setAttachment] = useState("");

packages/frontend/src/index.tsx

@@ -8,4 +8,4 @@ root.render(
   <div className="container" style={{ height: "100vh" }}>
     <Routes />
   </div>
-);
+);

yarn.lock

@@ -143,6 +143,7 @@ __metadata:
     react-bootstrap: "npm:1.4.0"
     react-bootstrap-icons: "npm:1.3.0"
     react-dom: "npm:19.0.0"
+    react-router-dom: "npm:7.1.1"
     typescript: "npm:~5.4.5"
     vite: "npm:6.0.7"
   languageName: unknown
@@ -2628,6 +2629,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 10c0/5b326bd0188120fb32c0be086b141b1481fec9941b76ad537f9110e10d61ee2636beac145463319c71e4be67a17e85b81ca9e13ceb6e3bb63b93d16824d6c149
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:1.0.6":
   version: 1.0.6
   resolution: "@types/estree@npm:1.0.6"
@@ -3086,6 +3094,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "cookie@npm:1.0.2"
+  checksum: 10c0/fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^7.0.0":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
@@ -4610,6 +4625,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:7.1.1":
+  version: 7.1.1
+  resolution: "react-router-dom@npm:7.1.1"
+  dependencies:
+    react-router: "npm:7.1.1"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 10c0/2dc5b231dd21aab21378c615b1e373149007d173e90db984e6f708b5ee4b28923b3cf88ce7d6f727be927829b37ba37c01436f9f7abeb84ba3d1bfc9ecd4bc72
+  languageName: node
+  linkType: hard
+
+"react-router@npm:7.1.1":
+  version: 7.1.1
+  resolution: "react-router@npm:7.1.1"
+  dependencies:
+    "@types/cookie": "npm:^0.6.0"
+    cookie: "npm:^1.0.1"
+    set-cookie-parser: "npm:^2.6.0"
+    turbo-stream: "npm:2.4.0"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 10c0/39f4859670f286eb2eac29e5830c1f730405701fca0808e5db853ec05e54e55a848c764e10ffd14a7b9b3b2154a0d6449656d7f208b9b3e4b2af780e07bf57a8
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:^4.4.1":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"
@@ -4826,6 +4871,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.6.0":
+  version: 2.7.1
+  resolution: "set-cookie-parser@npm:2.7.1"
+  checksum: 10c0/060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"
@@ -5067,6 +5119,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"turbo-stream@npm:2.4.0":
+  version: 2.4.0
+  resolution: "turbo-stream@npm:2.4.0"
+  checksum: 10c0/e68b2569f1f16e6e9633d090c6024b2ae9f0e97bfeacb572451ca3732e120ebbb546f3bc4afc717c46cb57b5aea6104e04ef497f9912eef6a7641e809518e98a
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.21.3":
   version: 0.21.3
   resolution: "type-fest@npm:0.21.3"