Skip to content

Commit 5b49a99

Browse files
smilkurismilkuri
authored
Switch to React Router v7 from Reach Router v1 (#162)
Switch to React Router v7 from Reach Router v1
1 parent 1161c35 commit 5b49a99

File tree

9 files changed

+85
-80
lines changed

9 files changed

+85
-80
lines changed

‎packages/frontend/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313
"@aws-sdk/s3-request-presigner": "3.627.0",
1414
"@aws-sdk/util-create-request": "3.622.0",
1515
"@aws-sdk/util-format-url": "3.609.0",
16-
"@reach/router": "1.3.4",
1716
"p-event": "^6.0.1",
1817
"react": "19.0.0",
1918
"react-bootstrap": "1.4.0",
20-
"react-dom": "19.0.0"
19+
"react-dom": "19.0.0",
20+
"react-router-dom": "7.1.1"
2121
},
2222
"scripts": {
2323
"prepare:frontend": "cd .. && yarn prepare:frontend",
@@ -55,7 +55,6 @@
5555
"devDependencies": {
5656
"@tsconfig/node20": "^20.1.4",
5757
"@types/node": "^18.11.18",
58-
"@types/reach__router": "1.3.6",
5958
"@types/react": "^19.0.0",
6059
"@types/react-dom": "^19.0.0",
6160
"@vitejs/plugin-react-refresh": "1.3.6",

‎packages/frontend/src/Routes.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { lazy, Suspense } from "react";
2-
import { Router } from "@reach/router";
2+
import { BrowserRouter as Router, Route, Routes as ReactRoutes } from "react-router-dom";
33

44
const ListNotes = lazy(() => import("./content/ListNotes"));
55
const CreateNote = lazy(() => import("./content/CreateNote"));
@@ -10,10 +10,12 @@ const Routes = () => (
1010
<div className="mt-md-4 d-flex flex-column justify-content-center">
1111
<Suspense fallback={<div>Loading...</div>}>
1212
<Router>
13-
<ListNotes path="/" />
14-
<CreateNote path="/note/new" />
15-
<ShowNote path="/notes/:noteId" />
16-
<NotFound default />
13+
<ReactRoutes>
14+
<Route path="/" element={<ListNotes />} />
15+
<Route path="/note/new" element={<CreateNote />} />
16+
<Route path="/notes/:noteId" element={<ShowNote />} />
17+
<Route path="*" element={<NotFound />} />
18+
</ReactRoutes>
1719
</Router>
1820
</Suspense>
1921
</div>

‎packages/frontend/src/content/CreateNote.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, FormEvent, useTransition } from "react";
22
import { Form, Button, Alert } from "react-bootstrap";
3-
import { navigate, RouteComponentProps } from "@reach/router";
3+
import { useNavigate } from "react-router-dom";
44
import { GATEWAY_URL } from "../config";
55
import { putObject } from "../libs";
66
import { HomeButton, ButtonSpinner, PageContainer } from "../components";
@@ -9,7 +9,8 @@ import { PlayAudioButton } from "./PlayAudioButton";
99

1010
const MAX_FILE_SIZE = 2000000;
1111

12-
const CreateNote = (props: RouteComponentProps) => {
12+
const CreateNote = () => {
13+
const navigate = useNavigate();
1314
const [isPending, startTransition] = useTransition();
1415
const [errorMsg, setErrorMsg] = useState("");
1516
const [noteContent, setNoteContent] = useState("");

‎packages/frontend/src/content/DeleteNoteButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React, { useState, useTransition } from "react";
22
import { Button, Alert } from "react-bootstrap";
33
import { GATEWAY_URL } from "../config";
4-
import { navigate } from "@reach/router";
4+
import { useNavigate } from "react-router-dom";
55
import { deleteObject } from "../libs";
66
import { ButtonSpinner } from "../components";
77

88
const DeleteNoteButton = (props: { noteId: string; attachment?: string }) => {
99
const { noteId, attachment } = props;
1010
const [isDeleting, startTransition] = useTransition();
1111
const [errorMsg, setErrorMsg] = useState("");
12-
12+
const navigate = useNavigate();
1313
const handleDelete = (event: React.MouseEvent<HTMLButtonElement>) => {
1414
event.preventDefault();
1515
startTransition(async () => {

‎packages/frontend/src/content/ListNotes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useTransition, useEffect } from "react";
2-
import { Link, RouteComponentProps } from "@reach/router";
2+
import { Link } from "react-router-dom";
33
import { GATEWAY_URL } from "../config";
44
import { Card, Alert, CardColumns, Button } from "react-bootstrap";
55
import { Loading, PageContainer } from "../components";
@@ -10,7 +10,7 @@ interface Note {
1010
attachment: boolean;
1111
}
1212

13-
const ListNotes = (props: RouteComponentProps) => {
13+
const ListNotes = () => {
1414
const [isPending, startTransition] = useTransition();
1515
const [errorMsg, setErrorMsg] = useState("");
1616
const [notes, setNotes] = useState<Note[]>([]);

‎packages/frontend/src/content/NotFound.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React from "react";
2-
import { RouteComponentProps } from "@reach/router";
32
import { HomeButton, PageContainer } from "../components";
43

5-
const NotFound = (props: RouteComponentProps) => (
6-
<PageContainer header={<HomeButton />}>404 Page Not Found</PageContainer>
7-
);
4+
const NotFound = () => <PageContainer header={<HomeButton />}>404 Page Not Found</PageContainer>;
85

96
export default NotFound;

‎packages/frontend/src/content/SaveNoteButton.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { useState, useTransition } from "react";
22
import { Button, Alert } from "react-bootstrap";
33
import { GATEWAY_URL } from "../config";
4-
import { navigate } from "@reach/router";
4+
import { useNavigate } from "react-router-dom";
55
import { ButtonSpinner } from "../components";
66

77
const SaveNoteButton = (props: { noteId: string; noteContent: string }) => {
88
const [isPending, startTransition] = useTransition();
99
const [errorMsg, setErrorMsg] = useState("");
10+
const navigate = useNavigate();
1011

1112
const handleSave = async (event: any) => {
1213
event.preventDefault();

‎packages/frontend/src/content/ShowNote.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React, { useState, useEffect, useTransition } from "react";
2-
import { RouteComponentProps, navigate } from "@reach/router";
2+
import { useParams, useNavigate } from "react-router-dom";
33
import { Form, Card } from "react-bootstrap";
44
import { GATEWAY_URL } from "../config";
55
import { DeleteNoteButton, SaveNoteButton } from "./";
66
import { getObjectUrl } from "../libs";
77
import { HomeButton, Loading, PageContainer } from "../components";
88

9-
const ShowNote = (props: RouteComponentProps<{ noteId: string }>) => {
10-
const { noteId } = props;
9+
const ShowNote = () => {
10+
const { noteId } = useParams();
11+
const navigate = useNavigate();
1112
const [isPending, startTransition] = useTransition();
1213
const [noteContent, setNoteContent] = useState("");
1314
const [attachment, setAttachment] = useState("");
1415
const [attachmentURL, setAttachmentURL] = useState("");
1516

16-
1717
useEffect(() => {
1818
if (noteId) {
1919
startTransition(async () => {

‎yarn.lock

Lines changed: 62 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -131,10 +131,8 @@ __metadata:
131131
"@aws-sdk/s3-request-presigner": "npm:3.627.0"
132132
"@aws-sdk/util-create-request": "npm:3.622.0"
133133
"@aws-sdk/util-format-url": "npm:3.609.0"
134-
"@reach/router": "npm:1.3.4"
135134
"@tsconfig/node20": "npm:^20.1.4"
136135
"@types/node": "npm:^18.11.18"
137-
"@types/reach__router": "npm:1.3.6"
138136
"@types/react": "npm:^19.0.0"
139137
"@types/react-dom": "npm:^19.0.0"
140138
"@vitejs/plugin-react-refresh": "npm:1.3.6"
@@ -143,6 +141,7 @@ __metadata:
143141
react-bootstrap: "npm:1.4.0"
144142
react-bootstrap-icons: "npm:1.3.0"
145143
react-dom: "npm:19.0.0"
144+
react-router-dom: "npm:7.1.1"
146145
typescript: "npm:~5.4.5"
147146
vite: "npm:6.0.7"
148147
languageName: unknown
@@ -1818,21 +1817,6 @@ __metadata:
18181817
languageName: node
18191818
linkType: hard
18201819

1821-
"@reach/router@npm:1.3.4":
1822-
version: 1.3.4
1823-
resolution: "@reach/router@npm:1.3.4"
1824-
dependencies:
1825-
create-react-context: "npm:0.3.0"
1826-
invariant: "npm:^2.2.3"
1827-
prop-types: "npm:^15.6.1"
1828-
react-lifecycles-compat: "npm:^3.0.4"
1829-
peerDependencies:
1830-
react: 15.x || 16.x || 16.4.0-alpha.0911da3
1831-
react-dom: 15.x || 16.x || 16.4.0-alpha.0911da3
1832-
checksum: 10c0/083fcb658ae5cd0de2b7ebe56bbb8c1b4aa6ec035038d41916afcdd2f31ffd7ccdd6848f7ee8e53d562c31fc4c1b1953fd7007eb9d57daf65779f344ca5a5373
1833-
languageName: node
1834-
linkType: hard
1835-
18361820
"@restart/context@npm:^2.1.4":
18371821
version: 2.1.4
18381822
resolution: "@restart/context@npm:2.1.4"
@@ -2628,20 +2612,20 @@ __metadata:
26282612
languageName: node
26292613
linkType: hard
26302614

2615+
"@types/cookie@npm:^0.6.0":
2616+
version: 0.6.0
2617+
resolution: "@types/cookie@npm:0.6.0"
2618+
checksum: 10c0/5b326bd0188120fb32c0be086b141b1481fec9941b76ad537f9110e10d61ee2636beac145463319c71e4be67a17e85b81ca9e13ceb6e3bb63b93d16824d6c149
2619+
languageName: node
2620+
linkType: hard
2621+
26312622
"@types/estree@npm:1.0.6":
26322623
version: 1.0.6
26332624
resolution: "@types/estree@npm:1.0.6"
26342625
checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a
26352626
languageName: node
26362627
linkType: hard
26372628

2638-
"@types/history@npm:*":
2639-
version: 4.7.11
2640-
resolution: "@types/history@npm:4.7.11"
2641-
checksum: 10c0/3facf37c2493d1f92b2e93a22cac7ea70b06351c2ab9aaceaa3c56aa6099fb63516f6c4ec1616deb5c56b4093c026a043ea2d3373e6c0644d55710364d02c934
2642-
languageName: node
2643-
linkType: hard
2644-
26452629
"@types/invariant@npm:^2.2.33":
26462630
version: 2.2.37
26472631
resolution: "@types/invariant@npm:2.2.37"
@@ -2672,16 +2656,6 @@ __metadata:
26722656
languageName: node
26732657
linkType: hard
26742658

2675-
"@types/reach__router@npm:1.3.6":
2676-
version: 1.3.6
2677-
resolution: "@types/reach__router@npm:1.3.6"
2678-
dependencies:
2679-
"@types/history": "npm:*"
2680-
"@types/react": "npm:*"
2681-
checksum: 10c0/518ea0ddbaca66fd8dd9297cd71aea9f1db5f1d326794b28db6aead6844139df78594dca4cb3c5b849877b885f6860f5ab44090fb5b73628a968537f55763dea
2682-
languageName: node
2683-
linkType: hard
2684-
26852659
"@types/react-dom@npm:^19.0.0":
26862660
version: 19.0.2
26872661
resolution: "@types/react-dom@npm:19.0.2"
@@ -2700,7 +2674,7 @@ __metadata:
27002674
languageName: node
27012675
linkType: hard
27022676

2703-
"@types/react@npm:*, @types/react@npm:>=16.9.11, @types/react@npm:^19.0.0":
2677+
"@types/react@npm:>=16.9.11, @types/react@npm:^19.0.0":
27042678
version: 19.0.2
27052679
resolution: "@types/react@npm:19.0.2"
27062680
dependencies:
@@ -3086,6 +3060,13 @@ __metadata:
30863060
languageName: node
30873061
linkType: hard
30883062

3063+
"cookie@npm:^1.0.1":
3064+
version: 1.0.2
3065+
resolution: "cookie@npm:1.0.2"
3066+
checksum: 10c0/fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b
3067+
languageName: node
3068+
linkType: hard
3069+
30893070
"cosmiconfig@npm:^7.0.0":
30903071
version: 7.1.0
30913072
resolution: "cosmiconfig@npm:7.1.0"
@@ -3099,19 +3080,6 @@ __metadata:
30993080
languageName: node
31003081
linkType: hard
31013082

3102-
"create-react-context@npm:0.3.0":
3103-
version: 0.3.0
3104-
resolution: "create-react-context@npm:0.3.0"
3105-
dependencies:
3106-
gud: "npm:^1.0.0"
3107-
warning: "npm:^4.0.3"
3108-
peerDependencies:
3109-
prop-types: ^15.0.0
3110-
react: ^0.14.0 || ^15.0.0 || ^16.0.0
3111-
checksum: 10c0/3f9dfde23da59e3f748b5f1b06c7ff8cbf48095cf2d62212427195860f1ee4b2b0b475280c19592f7fffb9fd100fd739af687281d7c5c93806d519bf66f6dd86
3112-
languageName: node
3113-
linkType: hard
3114-
31153083
"cross-spawn@npm:^7.0.0":
31163084
version: 7.0.6
31173085
resolution: "cross-spawn@npm:7.0.6"
@@ -3623,13 +3591,6 @@ __metadata:
36233591
languageName: node
36243592
linkType: hard
36253593

3626-
"gud@npm:^1.0.0":
3627-
version: 1.0.0
3628-
resolution: "gud@npm:1.0.0"
3629-
checksum: 10c0/a4db6edc18e2c4e3a22dc9e639e40a4e5650d53dae9cf384a96d5380dfa17ddda376cf6b7797a5c30d140d2532e5a69d167bdb70c2c151dd673253bac6b027f3
3630-
languageName: node
3631-
linkType: hard
3632-
36333594
"has-flag@npm:^4.0.0":
36343595
version: 4.0.0
36353596
resolution: "has-flag@npm:4.0.0"
@@ -3732,7 +3693,7 @@ __metadata:
37323693
languageName: node
37333694
linkType: hard
37343695

3735-
"invariant@npm:^2.2.3, invariant@npm:^2.2.4":
3696+
"invariant@npm:^2.2.4":
37363697
version: 2.2.4
37373698
resolution: "invariant@npm:2.2.4"
37383699
dependencies:
@@ -4491,7 +4452,7 @@ __metadata:
44914452
languageName: node
44924453
linkType: hard
44934454

4494-
"prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
4455+
"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
44954456
version: 15.8.1
44964457
resolution: "prop-types@npm:15.8.1"
44974458
dependencies:
@@ -4610,6 +4571,36 @@ __metadata:
46104571
languageName: node
46114572
linkType: hard
46124573

4574+
"react-router-dom@npm:7.1.1":
4575+
version: 7.1.1
4576+
resolution: "react-router-dom@npm:7.1.1"
4577+
dependencies:
4578+
react-router: "npm:7.1.1"
4579+
peerDependencies:
4580+
react: ">=18"
4581+
react-dom: ">=18"
4582+
checksum: 10c0/2dc5b231dd21aab21378c615b1e373149007d173e90db984e6f708b5ee4b28923b3cf88ce7d6f727be927829b37ba37c01436f9f7abeb84ba3d1bfc9ecd4bc72
4583+
languageName: node
4584+
linkType: hard
4585+
4586+
"react-router@npm:7.1.1":
4587+
version: 7.1.1
4588+
resolution: "react-router@npm:7.1.1"
4589+
dependencies:
4590+
"@types/cookie": "npm:^0.6.0"
4591+
cookie: "npm:^1.0.1"
4592+
set-cookie-parser: "npm:^2.6.0"
4593+
turbo-stream: "npm:2.4.0"
4594+
peerDependencies:
4595+
react: ">=18"
4596+
react-dom: ">=18"
4597+
peerDependenciesMeta:
4598+
react-dom:
4599+
optional: true
4600+
checksum: 10c0/39f4859670f286eb2eac29e5830c1f730405701fca0808e5db853ec05e54e55a848c764e10ffd14a7b9b3b2154a0d6449656d7f208b9b3e4b2af780e07bf57a8
4601+
languageName: node
4602+
linkType: hard
4603+
46134604
"react-transition-group@npm:^4.4.1":
46144605
version: 4.4.5
46154606
resolution: "react-transition-group@npm:4.4.5"
@@ -4826,6 +4817,13 @@ __metadata:
48264817
languageName: node
48274818
linkType: hard
48284819

4820+
"set-cookie-parser@npm:^2.6.0":
4821+
version: 2.7.1
4822+
resolution: "set-cookie-parser@npm:2.7.1"
4823+
checksum: 10c0/060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a
4824+
languageName: node
4825+
linkType: hard
4826+
48294827
"shebang-command@npm:^2.0.0":
48304828
version: 2.0.0
48314829
resolution: "shebang-command@npm:2.0.0"
@@ -5067,6 +5065,13 @@ __metadata:
50675065
languageName: node
50685066
linkType: hard
50695067

5068+
"turbo-stream@npm:2.4.0":
5069+
version: 2.4.0
5070+
resolution: "turbo-stream@npm:2.4.0"
5071+
checksum: 10c0/e68b2569f1f16e6e9633d090c6024b2ae9f0e97bfeacb572451ca3732e120ebbb546f3bc4afc717c46cb57b5aea6104e04ef497f9912eef6a7641e809518e98a
5072+
languageName: node
5073+
linkType: hard
5074+
50705075
"type-fest@npm:^0.21.3":
50715076
version: 0.21.3
50725077
resolution: "type-fest@npm:0.21.3"

0 commit comments

Comments
 (0)