Upgraded to React Router v6 (#181)

jwngr · Oct 1, 2024 · d24b16f · d24b16f
1 parent f158a20
commit d24b16f
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 175 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -6,15 +6,14 @@
   "dependencies": {
     "@tsparticles/react": "^3.0.0",
     "d3": "^7.9.0",
-    "history": "^4.10.1",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-autosuggest": "^10.1.0",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-lazyload": "^3.2.1",
     "react-modal": "^3.16.1",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.13",
     "typeface-crimson-text": "1.1.13",
     "typeface-quicksand": "1.1.13"
@@ -30,7 +29,6 @@
     "@types/react-helmet": "^6.1.11",
     "@types/react-lazyload": "^3.2.3",
     "@types/react-modal": "^3.16.3",
-    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.2",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc-f9ebd85a-20240925",

diff --git a/website/src/components/App.tsx b/website/src/components/App.tsx
@@ -1,15 +1,12 @@
 import Particles from '@tsparticles/react';
-import {createBrowserHistory} from 'history';
 import React, {lazy, Suspense} from 'react';
-import {Route, Router, Switch} from 'react-router-dom';
+import {BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
 import {ThemeProvider} from 'styled-components';
 
 import particlesConfig from '../resources/particles.config.json';
 import theme from '../resources/theme.json';
 import {Home} from './Home';
 
-const history = createBrowserHistory();
-
 const AsyncBlog = lazy(() => import('./blog/Blog').then((module) => ({default: module.Blog})));
 const AsyncBlogPost = lazy(() =>
   import('./blog/BlogPost').then((module) => ({default: module.BlogPost}))
@@ -28,23 +25,29 @@ export const App: React.FC = () => {
             zIndex: -1,
           }}
         />
-        <Router history={history}>
-          <Switch>
-            <Route path="/blog/:postId">
-              <Suspense fallback={null}>
-                <AsyncBlogPost />
-              </Suspense>
-            </Route>
-            <Route path="/blog">
-              <Suspense fallback={null}>
-                <AsyncBlog />
-              </Suspense>
-            </Route>
-            <Route path="/">
-              <Home />
-            </Route>
-          </Switch>
-        </Router>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route
+              path="/blog"
+              element={
+                <Suspense fallback={null}>
+                  <AsyncBlog />
+                </Suspense>
+              }
+            />
+            <Route
+              path="/blog/:postId"
+              element={
+                <Suspense fallback={null}>
+                  <AsyncBlogPost />
+                </Suspense>
+              }
+            />
+            {/* Redirect unmatched routes to home page, replacing history stack. */}
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </BrowserRouter>
       </>
     </ThemeProvider>
   );