From 6cc24890808d6d86ccb057fc400f9332a5910961 Mon Sep 17 00:00:00 2001
From: Tejas Benibagde <124677750+tejasbenibagde@users.noreply.github.com>
Date: Sat, 10 Aug 2024 05:17:59 +0000
Subject: [PATCH 1/2] Moved router to a separate folder for better code
 readability

---
 src/App.jsx          | 51 +++-----------------------------------------
 src/main.jsx         |  5 +++--
 src/routes/index.jsx | 29 +++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 50 deletions(-)
 create mode 100644 src/routes/index.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 65aebc60..ffc0ae04 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,58 +1,13 @@
-import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+import {  useLocation, Outlet } from "react-router-dom";
 import { useLayoutEffect } from "react";
-import Editor from "./pages/Editor";
-import Survey from "./pages/Survey";
-import BugReport from "./pages/BugReport";
-import Shortcuts from "./pages/Shortcuts";
-import Templates from "./pages/Templates";
-import LandingPage from "./pages/LandingPage";
 import SettingsContextProvider from "./context/SettingsContext";
 import { useSettings } from "./hooks";
-import NotFound from "./pages/NotFound";
 
 export default function App() {
   return (
     <SettingsContextProvider>
-      <BrowserRouter>
-        <RestoreScroll />
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route
-            path="/editor"
-            element={
-              <ThemedPage>
-                <Editor />
-              </ThemedPage>
-            }
-          />
-          <Route
-            path="/survey"
-            element={
-              <ThemedPage>
-                <Survey />
-              </ThemedPage>
-            }
-          />
-          <Route
-            path="/shortcuts"
-            element={
-              <ThemedPage>
-                <Shortcuts />
-              </ThemedPage>
-            }
-          />
-          <Route
-            path="/bug-report"
-            element={
-              <ThemedPage>
-                <BugReport />
-              </ThemedPage>
-            }
-          />
-          <Route path="/templates" element={<Templates />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </BrowserRouter>
+      <RestoreScroll />
+      <Outlet />
     </SettingsContextProvider>
   );
 }
diff --git a/src/main.jsx b/src/main.jsx
index 1e8888d9..ff0c1dfa 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -5,11 +5,12 @@ import App from "./App.jsx";
 import en_US from "@douyinfe/semi-ui/lib/es/locale/source/en_US";
 import "./index.css";
 import "./i18n/i18n.js";
-
+import { RouterProvider } from "react-router-dom";
+import router from "./routes";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <LocaleProvider locale={en_US}>
-    <App />
+    <RouterProvider router={router} />
     <Analytics />
   </LocaleProvider>,
 );
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
new file mode 100644
index 00000000..25a02418
--- /dev/null
+++ b/src/routes/index.jsx
@@ -0,0 +1,29 @@
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+} from "react-router-dom";
+import LandingPage from "../pages/LandingPage";
+import Editor from "../pages/Editor";
+import Survey from "../pages/Survey";
+import Shortcuts from "../pages/Shortcuts";
+import BugReport from "../pages/BugReport";
+import Templates from "../pages/Templates";
+import NotFound from "../pages/NotFound";
+import App from "../App";
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<App />}>
+      <Route path="/" index={true} element={<LandingPage />} />
+      <Route path="/editor" element={<Editor />} />
+      <Route path="/survey" element={<Survey />} />
+      <Route path="/shortcuts" element={<Shortcuts />} />
+      <Route path="/bug-report" element={<BugReport />} />
+      <Route path="/templates" element={<Templates />} />
+      <Route path="*" element={<NotFound />} />
+    </Route>
+  )
+);
+
+export default router;
\ No newline at end of file

From 349783cda02dd49e1c9c0cf5972c96474114545b Mon Sep 17 00:00:00 2001
From: Tejas Benibagde <124677750+tejasbenibagde@users.noreply.github.com>
Date: Sat, 10 Aug 2024 17:50:42 +0000
Subject: [PATCH 2/2] UPDATE: moved router to separate folder for better code
 readability

---
 src/App.jsx  | 6 ++++--
 src/main.jsx | 1 -
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index ffc0ae04..2661392d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import {  useLocation, Outlet } from "react-router-dom";
+import { useLocation, Outlet } from "react-router-dom";
 import { useLayoutEffect } from "react";
 import SettingsContextProvider from "./context/SettingsContext";
 import { useSettings } from "./hooks";
@@ -7,7 +7,9 @@ export default function App() {
   return (
     <SettingsContextProvider>
       <RestoreScroll />
-      <Outlet />
+      <ThemedPage>
+        <Outlet />
+      </ThemedPage>
     </SettingsContextProvider>
   );
 }
diff --git a/src/main.jsx b/src/main.jsx
index ff0c1dfa..99be27d4 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,7 +1,6 @@
 import ReactDOM from "react-dom/client";
 import { LocaleProvider } from "@douyinfe/semi-ui";
 import { Analytics } from "@vercel/analytics/react";
-import App from "./App.jsx";
 import en_US from "@douyinfe/semi-ui/lib/es/locale/source/en_US";
 import "./index.css";
 import "./i18n/i18n.js";