From df61ce27e0a304daf054634da49c9744473b1d04 Mon Sep 17 00:00:00 2001
From: ThePotioner <heavycaffeiner@gmail.com>
Date: Wed, 24 Sep 2025 15:43:34 +0900
Subject: [PATCH] refactor(routing): Migrate to React Router and simplify
 component structure

Replaces 'wouter' with 'react-router-dom' to standardize the routing library and resolve dependency conflicts.

Key changes:

- All routing logic, including hooks (useLocation) and components (Link, Routes), now uses 'react-router-dom'.

- The component tree has been simplified by removing the MainContainer component and moving its layout directly into App.tsx.

- The <BrowserRouter> provider is now correctly placed at the application's entry point in main.tsx.
---
 package.json                                  |   3 +-
 src/App.tsx                                   |  18 ++-
 src/components/MainContainer.tsx              |  17 ---
 src/components/PageContainer.tsx              |  14 +--
 src/components/Sidebar.tsx                    |   8 +-
 .../{ToggleTheme.tsx => ThemeButton.tsx}      |   2 +-
 src/components/Topbar.tsx                     |   7 +-
 src/main.tsx                                  |   5 +-
 yarn.lock                                     | 111 +++++++++++++-----
 9 files changed, 118 insertions(+), 67 deletions(-)
 delete mode 100644 src/components/MainContainer.tsx
 rename src/components/{ToggleTheme.tsx => ThemeButton.tsx} (95%)

diff --git a/package.json b/package.json
index 8f5a1f1..a8dc365 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,9 @@
     "lucide-react": "^0.544.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.1",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
-    "wouter": "^3.7.1",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
@@ -29,6 +29,7 @@
     "@types/node": "^24.3.1",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-swc": "^4.1.0",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",
diff --git a/src/App.tsx b/src/App.tsx
index 7f04f98..7515a92 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,17 @@
-import MainContainer from './components/MainContainer';
+import PageContainer from './components/PageContainer';
+import Sidebar from './components/Sidebar';
+import { ThemeButton } from './components/ThemeButton';
 
-function App() {
-  return <MainContainer />;
-}
+const App = () => {
+  return (
+    <div className="flex h-screen">
+      <Sidebar />
+      <PageContainer />
+      <div className="absolute bottom-4 right-4">
+        <ThemeButton />
+      </div>
+    </div>
+  );
+};
 
 export default App;
diff --git a/src/components/MainContainer.tsx b/src/components/MainContainer.tsx
deleted file mode 100644
index cdafd67..0000000
--- a/src/components/MainContainer.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import PageContainer from './PageContainer';
-import Sidebar from './Sidebar';
-import { ToggleTheme } from './ToggleTheme';
-
-const MainContainer = () => {
-  return (
-    <div className="flex h-screen">
-      <Sidebar />
-      <PageContainer />
-      <div className="absolute bottom-4 right-4">
-        <ToggleTheme />
-      </div>
-    </div>
-  );
-};
-
-export default MainContainer;
diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
index 1bd7997..ccd5c49 100644
--- a/src/components/PageContainer.tsx
+++ b/src/components/PageContainer.tsx
@@ -1,4 +1,4 @@
-import { Route, Switch } from 'wouter';
+import { Routes, Route } from 'react-router-dom';
 
 import Topbar from './Topbar';
 
@@ -11,12 +11,12 @@ const PageContainer = () => {
   return (
     <div className="flex flex-col flex-1">
       <Topbar />
-      <Switch>
-        <Route path="/" component={Home} />
-        <Route path="/dashboard" component={Dashboard} />
-        <Route path="/todos" component={Todos} />
-        <Route component={NotFound} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/todos" element={<Todos />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
     </div>
   );
 };
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 4fb7a75..10cce81 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button';
-import { useLocation, Link } from 'wouter';
+import { Link, useLocation } from 'react-router-dom';
 import {
   IconHome,
   IconCalendarWeekFilled,
@@ -16,7 +16,7 @@ export const items = [
 ];
 
 const Sidebar = () => {
-  const [location] = useLocation();
+  const location = useLocation();
   return (
     <nav className="flex flex-col min-w-[240px] max-w-[480px] bg-sidebar border">
       <div className="flex flex-col m-2 gap-2">
@@ -26,10 +26,10 @@ const Sidebar = () => {
             asChild
             size="sm"
             key={item.name}
-            variant={location === item.href ? 'secondary' : 'ghost'}
+            variant={location.pathname === item.href ? 'secondary' : 'ghost'}
             className="justify-start"
           >
-            <Link href={item.href}>
+            <Link to={item.href}>
               <item.icon /> {item.name}
             </Link>
           </Button>
diff --git a/src/components/ToggleTheme.tsx b/src/components/ThemeButton.tsx
similarity index 95%
rename from src/components/ToggleTheme.tsx
rename to src/components/ThemeButton.tsx
index 1dfde9e..8523df0 100644
--- a/src/components/ToggleTheme.tsx
+++ b/src/components/ThemeButton.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { useTheme } from '../hooks/useThemeHook';
 import { changeTheme } from '../lib/utils';
 
-export const ToggleTheme = () => {
+export const ThemeButton = () => {
   const { theme, toggleTheme } = useTheme();
 
   useEffect(() => {
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
index 525cea6..ff9cd69 100644
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -1,13 +1,14 @@
+import { useLocation } from 'react-router-dom';
+
 import { Button } from '@/components/ui/button';
 import { items } from './Sidebar';
-import { useLocation } from 'wouter';
 
 const Topbar = () => {
-  const [location] = useLocation();
+  const location = useLocation();
   return (
     <div className="flex bg-sidebar p-2 gap-2 border-t border-r border-b border-l-0">
       <Button variant="ghost" size="sm" className="font-semibold">
-        {items.find((item) => item.href === location)?.name}
+        {items.find((item) => item.href === location.pathname)?.name}
         {/* TODO: Add Sidebar Items(Pages, etc...) to Zustand Store */}
       </Button>
     </div>
diff --git a/src/main.tsx b/src/main.tsx
index fa61059..5edda40 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,13 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import './styles/index.css';
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );
diff --git a/yarn.lock b/yarn.lock
index 5fd4c93..e42a521 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1066,6 +1066,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/history@npm:^4.7.11":
+  version: 4.7.11
+  resolution: "@types/history@npm:4.7.11"
+  checksum: 10c0/3facf37c2493d1f92b2e93a22cac7ea70b06351c2ab9aaceaa3c56aa6099fb63516f6c4ec1616deb5c56b4093c026a043ea2d3373e6c0644d55710364d02c934
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.15":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
@@ -1091,6 +1098,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-router-dom@npm:^5.3.3":
+  version: 5.3.3
+  resolution: "@types/react-router-dom@npm:5.3.3"
+  dependencies:
+    "@types/history": "npm:^4.7.11"
+    "@types/react": "npm:*"
+    "@types/react-router": "npm:*"
+  checksum: 10c0/a9231a16afb9ed5142678147eafec9d48582809295754fb60946e29fcd3757a4c7a3180fa94b45763e4c7f6e3f02379e2fcb8dd986db479dcab40eff5fc62a91
+  languageName: node
+  linkType: hard
+
+"@types/react-router@npm:*":
+  version: 5.1.20
+  resolution: "@types/react-router@npm:5.1.20"
+  dependencies:
+    "@types/history": "npm:^4.7.11"
+    "@types/react": "npm:*"
+  checksum: 10c0/1f7eee61981d2f807fa01a34a0ef98ebc0774023832b6611a69c7f28fdff01de5a38cabf399f32e376bf8099dcb7afaf724775bea9d38870224492bea4cb5737
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:*":
+  version: 19.1.13
+  resolution: "@types/react@npm:19.1.13"
+  dependencies:
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/75e35b54883f5ed07d3b5cb16a4711b6dbb7ec6b74301bcb9bfa697c9d9fff022ec508e1719e7b2c69e2e8b042faac1125be7717b5e5e084f816a2c88e136920
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^19.1.10":
   version: 19.1.12
   resolution: "@types/react@npm:19.1.12"
@@ -1448,6 +1485,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
+
 "cross-spawn@npm:^7.0.6":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
@@ -1906,6 +1950,7 @@ __metadata:
     "@types/node": "npm:^24.3.1"
     "@types/react": "npm:^19.1.10"
     "@types/react-dom": "npm:^19.1.7"
+    "@types/react-router-dom": "npm:^5.3.3"
     "@vitejs/plugin-react-swc": "npm:^4.1.0"
     class-variance-authority: "npm:^0.7.1"
     clsx: "npm:^2.1.1"
@@ -1916,13 +1961,13 @@ __metadata:
     lucide-react: "npm:^0.544.0"
     react: "npm:^19.1.1"
     react-dom: "npm:^19.1.1"
+    react-router-dom: "npm:^7.9.1"
     tailwind-merge: "npm:^3.3.1"
     tailwindcss: "npm:^4.1.13"
     tw-animate-css: "npm:^1.3.8"
     typescript: "npm:~5.8.3"
     typescript-eslint: "npm:^8.39.1"
     vite: "npm:^7.1.2"
-    wouter: "npm:^3.7.1"
     zustand: "npm:^5.0.8"
   languageName: unknown
   linkType: soft
@@ -2496,13 +2541,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mitt@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "mitt@npm:3.0.1"
-  checksum: 10c0/3ab4fdecf3be8c5255536faa07064d05caa3dd332bd318ff02e04621f7b3069ca1de9106cfe8e7ced675abfc2bec2ce4c4ef321c4a1bb1fb29df8ae090741913
-  languageName: node
-  linkType: hard
-
 "mkdirp@npm:^3.0.1":
   version: 3.0.1
   resolution: "mkdirp@npm:3.0.1"
@@ -2733,6 +2771,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:^7.9.1":
+  version: 7.9.1
+  resolution: "react-router-dom@npm:7.9.1"
+  dependencies:
+    react-router: "npm:7.9.1"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 10c0/a211b9e6d69e6efc9b55cfc0f1eb8a772832f86b13fd16a6d89befb78ff6bfc06d9cc48abf4b96420edd81a07216f910c15afb0769ae4d4f445b59d4e2ec9376
+  languageName: node
+  linkType: hard
+
+"react-router@npm:7.9.1":
+  version: 7.9.1
+  resolution: "react-router@npm:7.9.1"
+  dependencies:
+    cookie: "npm:^1.0.1"
+    set-cookie-parser: "npm:^2.6.0"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 10c0/27448e4c84199d240f6a15d503cf26509320fd4ea31aec6f12a427ac4a560a320321e9b119981eddad25801c062be0f814d4461174f69efdc9f9e5af14cf6915
+  languageName: node
+  linkType: hard
+
 "react@npm:^19.1.1":
   version: 19.1.1
   resolution: "react@npm:19.1.1"
@@ -2740,13 +2806,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexparam@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "regexparam@npm:3.0.0"
-  checksum: 10c0/a6430d7b97d5a7d5518f37a850b6b73aab479029d02f46af4fa0e8e4a1d7aad05b7a0d2d10c86ded21a14d5f0fa4c68525f873a5fca2efeefcccd93c36627459
-  languageName: node
-  linkType: hard
-
 "reselect@npm:^5.1.1":
   version: 5.1.1
   resolution: "reselect@npm:5.1.1"
@@ -2885,6 +2944,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"
@@ -3170,7 +3236,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.0.0, use-sync-external-store@npm:^1.5.0":
+"use-sync-external-store@npm:^1.5.0":
   version: 1.5.0
   resolution: "use-sync-external-store@npm:1.5.0"
   peerDependencies:
@@ -3263,19 +3329,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wouter@npm:^3.7.1":
-  version: 3.7.1
-  resolution: "wouter@npm:3.7.1"
-  dependencies:
-    mitt: "npm:^3.0.1"
-    regexparam: "npm:^3.0.0"
-    use-sync-external-store: "npm:^1.0.0"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 10c0/1974f32f425c1cf6412e6946936e37db3a283e6e6965acd336ce04d67bb36fbf2c40fc90a1bc4537930b326e370b5e053437e0f80554cb94d34ec8c354b86693
-  languageName: node
-  linkType: hard
-
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"