Update routing and add error boundary

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes } from "react-router";
+import { createBrowserRouter, RouterProvider } from "react-router";
 import NavBar from "./components/nav/NavBar";
 import AdminPage from "./pages/protected/AdminPage";
 import GamePage from "./pages/protected/GamePage";
@@ -13,9 +13,16 @@ import HomePage from "./pages/public/HomePage";
 import LoginPage from "./pages/public/LoginPage";
 import SignupPage from "./pages/public/SignupPage";
 import { ProtectedRoute } from "./providers/AuthProvider";
+import ErrorBoundary from "./providers/ErrorBoundary";
 
 
-const publicRoutes: { path: string; element: React.ReactElement; }[] = [
+const routes = createBrowserRouter([
+	{
+		element: <NavBar/>,
+		children: [
+			{
+				errorElement: <ErrorBoundary/>,
+				children: [
 					{
 						path: "/",
 						element: <HomePage/>
@@ -27,10 +34,10 @@ const publicRoutes: { path: string; element: React.ReactElement; }[] = [
 					{
 						path: "/signup",
 						element: <SignupPage/>
-	}
+					},
-];
+					{
-
+						element: <ProtectedRoute/>,
-const protectedRoutes: { path: string; element: React.ReactElement; }[] = [
+						children: [
 							{
 								path: "/logout",
 								element: <LogoutPage/>
@@ -71,40 +78,17 @@ const protectedRoutes: { path: string; element: React.ReactElement; }[] = [
 								path: "/raidGroup/:raidGroupId/raidInstance/:raidInstanceId",
 								element: <RaidInstancePage/>
 							}
-];
+						]
+					}
+				]
+			}
+		]
+	}
+]);
 
 
 export default function App(){
 	return (
-		<BrowserRouter>
+		<RouterProvider router={routes}/>
-			{/* Nav Bar */}
-			<NavBar/>
-
-			{/* Routing */}
-			<Routes>
-				{/* Public Routes */}
-				{
-					publicRoutes.map((route) => (
-						<Route
-							key={route.path}
-							path={route.path}
-							element={route.element}
-						/>
-					))
-				}
-				{/* Protected Routes */}
-				<Route element={<ProtectedRoute/>}>
-					{
-						protectedRoutes.map((route) => (
-							<Route
-								key={route.path}
-								path={route.path}
-								element={route.element}
-							/>
-						))
-					}
-				</Route>
-			</Routes>
-		</BrowserRouter>
 	);
 }

src/components/nav/NavBar.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { BsList } from "react-icons/bs";
-import { Link } from "react-router";
+import { Link, Outlet } from "react-router";
 import DarkModeToggle from "./DarkModeToggle";
 import ProtectedNavLinks from "./ProtectedNavLinks";
 import PublicNavLinks from "./PublicNavLinks";
@@ -9,6 +9,7 @@ import raidBuilderIcon from "/raidBuilderIcon.svg";
 
 export default function NavBar(){
 	return (
+		<>
 			<nav
 				className={clsx(
 					"border-b-2 z-40",
@@ -52,5 +53,7 @@ export default function NavBar(){
 					</div>
 				</div>
 			</nav>
+			<Outlet/>
+		</>
 	);
 }

src/providers/ErrorBoundary.tsx

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router";
+
+
+export default function ErrorBoundary(){
+	const error = useRouteError();
+
+	console.log("error");
+	console.log(error);
+
+
+	return (
+		<div>
+			Error Boundary
+		</div>
+	);
+}