move react routes to specific file

app/javascript/src/App.tsx

@@ -1,27 +1,27 @@
+import type { FC } from "react";
 import React from "react";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 
+import { Navbar } from "./components/Navbar";
+import { SideNav } from "./components/SideNav";
 import { AppContext } from "./contexts/AppContext";
 import { AuthProvider } from "./contexts/AuthProvider";
-import { Home } from "./pages";
+import { Routes } from "./Routes";
 
-export const App = () => {
+export const App: FC = () => {
   return (
+    <Router>
       <AuthProvider>
         <AppContext>
           <main className="min-h-screen w-full bg-gray-50 flex flex-col">
-          <Router>
+            <Navbar />
-            <Switch>
+            <div className="flex flex-grow">
-              <Route path="/hello_about">
+              <SideNav />
-                <div className="bg-gray-600">Hello World!</div>
+              <Routes />
-              </Route>
+            </div>
-              <Route path="/">
-                <Home />
-              </Route>
-            </Switch>
-          </Router>
           </main>
         </AppContext>
       </AuthProvider>
+    </Router>
   );
 };

app/javascript/src/Routes.tsx

@@ -0,0 +1,15 @@
+import type { FC } from "react";
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+
+import { Home } from "./pages";
+
+export const Routes: FC = () => {
+  return (
+    <Switch>
+      <Route path="/">
+        <Home />
+      </Route>
+    </Switch>
+  );
+};