replace react-router-dom with wouter

mat-sz · Oct 24, 2023 · 3f3f012 · 3f3f012
1 parent 5cf1780
commit 3f3f012
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 50 deletions.
diff --git a/web/package.json b/web/package.json
@@ -35,11 +35,11 @@
     "react-expanding-textarea": "^2.3.6",
     "react-i18not": "^0.1.1",
     "react-icons": "^4.3.1",
-    "react-router-dom": "^6.3.0",
     "sass": "^1.51.0",
     "typesocket": "^1.0.2",
     "uuid": "^9.0.0",
-    "vite-plugin-info": "^0.4.1"
+    "vite-plugin-info": "^0.4.1",
+    "wouter": "^2.12.1"
   },
   "scripts": {
     "start": "vite",

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Routes, Route, BrowserRouter } from 'react-router-dom';
+import { Router, Route, Switch } from 'wouter';
 import { useTranslation } from 'react-i18not';
 
 import './App.scss';
@@ -19,20 +19,34 @@ export const App: React.FC = () => {
   document.body.dir = dir;
 
   return (
-    <BrowserRouter>
-      <div className="app">
-        <Header />
-        <Status />
-        <Routes>
-          <Route path="/abuse" element={<Abuse />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/privacy" element={<Privacy />} />
-          <Route path="/tos" element={<ToS />} />
-          <Route path="/tech" element={<TechnicalInformation />} />
-          <Route path="/:networkName" element={<Home />} />
-          <Route index element={<Redirect />} />
-        </Routes>
-      </div>
-    </BrowserRouter>
+    <div className="app">
+      <Header />
+      <Status />
+      <Router>
+        <Switch>
+          <Route path="/abuse">
+            <Abuse />
+          </Route>
+          <Route path="/about">
+            <About />
+          </Route>
+          <Route path="/privacy">
+            <Privacy />
+          </Route>
+          <Route path="/tos">
+            <ToS />
+          </Route>
+          <Route path="/tech">
+            <TechnicalInformation />
+          </Route>
+          <Route path="/:networkName">
+            <Home />
+          </Route>
+          <Route>
+            <Redirect />
+          </Route>
+        </Switch>
+      </Router>
+    </div>
   );
 };
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
-import { Link } from 'react-router-dom';
+import { Link } from 'wouter';
 import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
@@ -5,7 +5,7 @@ import {
   IoInformationCircle,
   IoLogoTwitter,
 } from 'react-icons/io5/index.js';
-import { Link } from 'react-router-dom';
+import { Link } from 'wouter';
 import { observer } from 'mobx-react-lite';
 
 import styles from './Header.module.scss';

diff --git a/web/src/screens/About.tsx b/web/src/screens/About.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'wouter';
 
 import { TextSection } from '../components/TextSection.js';
 

diff --git a/web/src/screens/Abuse.tsx b/web/src/screens/Abuse.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'wouter';
 import { observer } from 'mobx-react-lite';
 
 import { TextSection } from '../components/TextSection.js';

diff --git a/web/src/screens/Home.tsx b/web/src/screens/Home.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'wouter';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18not';
 import clsx from 'clsx';

diff --git a/web/src/screens/Redirect.tsx b/web/src/screens/Redirect.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation } from 'wouter';
 import { useTranslation } from 'react-i18not';
 import { observer } from 'mobx-react-lite';
 
@@ -14,7 +14,7 @@ export const Redirect: React.FC = observer(() => {
   const suggestedNetworkName = applicationStore.suggestedNetworkName;
   const { connected, clientId } = connection;
 
-  const navigate = useNavigate();
+  const navigate = useLocation()[1];
 
   useEffect(() => {
     const currentNetworkName =

diff --git a/web/src/sections/Connect/index.tsx b/web/src/sections/Connect/index.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { QRCodeSVG } from 'qrcode.react';
 import { useTranslation } from 'react-i18not';
 import { IoSend } from 'react-icons/io5/index.js';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'wouter';
 import { observer } from 'mobx-react-lite';
 
 import styles from './index.module.scss';
@@ -16,10 +16,10 @@ import { LocalNetworks } from '../LocalNetworks/index.js';
 
 export const ConnectSection: React.FC = observer(() => {
   const { t } = useTranslation();
-  const { pathname } = useLocation();
+  const [location] = useLocation();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const href = useMemo(() => window.location.href, [pathname]);
+  const href = useMemo(() => window.location.href, [location]);
 
   return (
     <>

diff --git a/web/src/sections/LocalNetworks/index.tsx b/web/src/sections/LocalNetworks/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
-import { Link } from 'react-router-dom';
+import { Link } from 'wouter';
 
 import styles from './index.module.scss';
 import { applicationStore, networkStore } from '../../stores/index.js';

diff --git a/yarn.lock b/yarn.lock
@@ -1581,11 +1581,6 @@
     node-addon-api "^3.2.1"
     node-gyp-build "^4.3.0"
 
-"@remix-run/[email protected]":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"
-  integrity sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==
-
 "@rushstack/eslint-patch@^1.1.0":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69"
@@ -5056,21 +5051,6 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@^6.3.0:
-  version "6.15.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.15.0.tgz#6da7db61e56797266fbbef0d5e324d6ac443ee40"
-  integrity sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==
-  dependencies:
-    "@remix-run/router" "1.8.0"
-    react-router "6.15.0"
-
-[email protected]:
-  version "6.15.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.15.0.tgz#bf2cb5a4a7ed57f074d4ea88db0d95033f39cac8"
-  integrity sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==
-  dependencies:
-    "@remix-run/router" "1.8.0"
-
 react-with-forwarded-ref@^0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/react-with-forwarded-ref/-/react-with-forwarded-ref-0.3.5.tgz#7d0bae2a9996fc91493f40ab179b8c54d29cfab9"
@@ -5957,7 +5937,7 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-sync-external-store@^1.2.0:
+use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -6118,6 +6098,13 @@ why-is-node-running@^2.2.2:
     siginfo "^2.0.0"
     stackback "0.0.2"
 
+wouter@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/wouter/-/wouter-2.12.1.tgz#11d913324c6320b679873783acb15ea3523b8521"
+  integrity sha512-G7a6JMSLSNcu6o8gdOfIzqxuo8Qx1qs+9rpVnlurH69angsSFPZP5gESNuVNeJct/MGpQg191pDo4HUjTx7IIQ==
+  dependencies:
+    use-sync-external-store "^1.0.0"
+
 wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"