Switched from own router to wouter

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "serve": "^12.0.0"
+    "serve": "^12.0.0",
+    "wouter": "^2.7.4"
   }
 }

src/App/index.tsx

@@ -1,22 +1,19 @@
-import { Route } from "~/types/router";
 import React from "react";
+import { Route, Switch } from "wouter";
 
 import { Bookshelf } from "~/pages/Bookshelf";
+import { BookView } from "~/pages/BookView";
 import { UploadForm } from "~/pages/UploadForm";
 
-import { Router } from "~/router";
-import { Err404 } from "~/router/404";
-
 import styles from "./App.module.css";
 
-const routes: Route[] = [
-  { Component: Bookshelf, path: "/list" },
-  { Component: UploadForm, path: "/upload" },
-];
-
 export const App = () => (
   <div className={styles.container}>
-    <Router routes={routes} startPath="/list" DefaultComponent={Err404} />
+    <Switch>
+      <Route path="/upload" component={UploadForm} />
+      <Route path="/" component={Bookshelf} />
+      <Route path="/:hash" component={BookView} />
+    </Switch>
   </div>
 );
 

src/pages/BookView/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { useRoute } from "wouter";
+
+export const BookView = () => {
+  const [match, params] = useRoute("/:hash");
+
+  return <div></div>;
+};

src/pages/Bookshelf/AddBook/index.tsx

@@ -1,15 +1,17 @@
 import React from "react";
+import { useLocation } from "wouter";
 
 import plusIcon from "~/assets/plus.svg";
 import styles from "./AddBook.module.css";
 import { BASE_URL } from "~/constants";
-import { goTo } from "~/router/goTo";
 
 export const AddBook = () => {
+  const [_, setLocation] = useLocation();
+
   return (
     <button
       onClick={() => {
-        goTo(BASE_URL + "/upload");
+        setLocation("/upload");
       }}
       className={styles.container}
     >

src/pages/UploadForm/index.tsx

@@ -1,15 +1,15 @@
 import React, { useState } from "react";
+import { useLocation } from "wouter";
 
 import plusIcon from "~/assets/plus.svg";
 import styles from "./UploadForm.module.css";
 import { submitFile, validateResponse, validState } from "~/api";
 import { saveBook } from "~/utils/localStorage";
-import { BASE_URL } from "~/constants";
-import { goTo } from "~/router/goTo";
 
 export const UploadForm = () => {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [_, setLocation] = useLocation();
 
   const processFile = async (file: File | undefined) => {
     try {
@@ -24,7 +24,7 @@ export const UploadForm = () => {
 
         if (validateResponse(res)) {
           saveBook(res, res.hash || Date.now().toString());
-          goTo(BASE_URL + "/list");
+          setLocation("/");
         }
       }
     } catch (err) {

src/router/404.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-export const Err404 = () => (
-  <>
-    <h1>Error 404</h1>
-    <h4>Path not found {window.location.pathname}</h4>
-  </>
-);

src/router/goTo.ts

@@ -1,4 +0,0 @@
-export const goTo = (
-  href: string = window.location.href,
-  nextTitle: string = document.title
-) => window.history.pushState({}, nextTitle, href);

src/router/index.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-
-import { BASE_URL } from "~/constants";
-import { Route } from "~/types/router";
-import { Err404 } from "./404";
-import { goTo } from "./goTo";
-
-interface IRouterProps {
-  routes: Route[];
-  startPath?: string;
-  DefaultComponent?: React.FC;
-}
-
-export const Router = ({
-  routes,
-  startPath,
-  DefaultComponent,
-}: IRouterProps) => {
-  const currPath = window.location.pathname;
-  if (startPath && currPath === "/") goTo(BASE_URL + startPath);
-
-  for (const route of routes) {
-    if (currPath === route.path || currPath === route.path + "/")
-      return <route.Component />;
-  }
-
-  if (DefaultComponent) return <DefaultComponent />;
-
-  return <Err404 />;
-};

src/types/router.ts

@@ -1,4 +0,0 @@
-export interface Route {
-  path: string;
-  Component: React.FC;
-}