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,98 +13,82 @@ 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([
 	{
-		path: "/",
+		element: <NavBar/>,
-		element: <HomePage/>
+		children: [
-	},
+			{
-	{
+				errorElement: <ErrorBoundary/>,
-		path: "/login",
+				children: [
-		element: <LoginPage/>
+					{
-	},
+						path: "/",
-	{
+						element: <HomePage/>
-		path: "/signup",
+					},
-		element: <SignupPage/>
+					{
+						path: "/login",
+						element: <LoginPage/>
+					},
+					{
+						path: "/signup",
+						element: <SignupPage/>
+					},
+					{
+						element: <ProtectedRoute/>,
+						children: [
+							{
+								path: "/logout",
+								element: <LogoutPage/>
+							},
+							{
+								path: "/admin",
+								element: <AdminPage/>
+							},
+							{
+								path: "/game",
+								element: <GamesPage/>
+							},
+							{
+								path: "/game/:gameId",
+								element: <GamePage/>
+							},
+							{
+								path: "/raidGroup",
+								element: <RaidGroupsPage/>
+							},
+							{
+								path: "/raidGroup/:raidGroupId",
+								element: <RaidGroupPage/>
+							},
+							{
+								path: "/raidGroup/:raidGroupId/person/:personId",
+								element: <PersonPage/>
+							},
+							{
+								path: "/raidGroup/:raidGroupId/raidLayout/:raidLayoutId",
+								element: <RaidLayoutPage/>
+							},
+							{
+								path: "/raidGroup/:raidGroupId/raidInstance",
+								element: <RaidInstancePage/>
+							},
+							{
+								path: "/raidGroup/:raidGroupId/raidInstance/:raidInstanceId",
+								element: <RaidInstancePage/>
+							}
+						]
+					}
+				]
+			}
+		]
 	}
-];
+]);
-
-const protectedRoutes: { path: string; element: React.ReactElement; }[] = [
-	{
-		path: "/logout",
-		element: <LogoutPage/>
-	},
-	{
-		path: "/admin",
-		element: <AdminPage/>
-	},
-	{
-		path: "/game",
-		element: <GamesPage/>
-	},
-	{
-		path: "/game/:gameId",
-		element: <GamePage/>
-	},
-	{
-		path: "/raidGroup",
-		element: <RaidGroupsPage/>
-	},
-	{
-		path: "/raidGroup/:raidGroupId",
-		element: <RaidGroupPage/>
-	},
-	{
-		path: "/raidGroup/:raidGroupId/person/:personId",
-		element: <PersonPage/>
-	},
-	{
-		path: "/raidGroup/:raidGroupId/raidLayout/:raidLayoutId",
-		element: <RaidLayoutPage/>
-	},
-	{
-		path: "/raidGroup/:raidGroupId/raidInstance",
-		element: <RaidInstancePage/>
-	},
-	{
-		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,48 +9,51 @@ import raidBuilderIcon from "/raidBuilderIcon.svg";
 
 export default function NavBar(){
 	return (
-		<nav
+		<>
-			className={clsx(
+			<nav
-				"border-b-2 z-40",
+				className={clsx(
-				"bg-gray-700 border-gray-600 dark:bg-zinc-900 dark:border-neutral-850 text-white"
+					"border-b-2 z-40",
-			)}
+					"bg-gray-700 border-gray-600 dark:bg-zinc-900 dark:border-neutral-850 text-white"
-		>
+				)}
-			<div
-				className="navContents"
 			>
-				<Link
+				<div
-					to="/"
+					className="navContents"
-					className="flex items-center space-x-3 rtl:space-x-reverse"
 				>
-					<img
+					<Link
-						src={raidBuilderIcon}
+						to="/"
-						alt="Raid Builder Logo"
+						className="flex items-center space-x-3 rtl:space-x-reverse"
-						width={30}
-						height={30}
-						fetchPriority="high"
-					/>
-					<span
-						className="self-center text-2xl font-semibold whitespace-nowrap"
 					>
-						Raid Builder
+						<img
-					</span>
+							src={raidBuilderIcon}
-				</Link>
+							alt="Raid Builder Logo"
-				<div
+							width={30}
-					className="peer md:hidden text-3xl"
+							height={30}
-				>
+							fetchPriority="high"
-					<BsList/>
+						/>
+						<span
+							className="self-center text-2xl font-semibold whitespace-nowrap"
+						>
+							Raid Builder
+						</span>
+					</Link>
+					<div
+						className="peer md:hidden text-3xl"
+					>
+						<BsList/>
+					</div>
+					<div
+						className={clsx(
+							"relative top-0 left-0 flex flex-row items-center rounded-lg space-x-4",
+							"bg-gray-700 dark:bg-zinc-900"
+						)}
+					>
+						<PublicNavLinks/>
+						<ProtectedNavLinks/>
+						<DarkModeToggle/>
+					</div>
 				</div>
-				<div
+			</nav>
-					className={clsx(
+			<Outlet/>
-						"relative top-0 left-0 flex flex-row items-center rounded-lg space-x-4",
+		</>
-						"bg-gray-700 dark:bg-zinc-900"
-					)}
-				>
-					<PublicNavLinks/>
-					<ProtectedNavLinks/>
-					<DarkModeToggle/>
-				</div>
-			</div>
-		</nav>
 	);
 }

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>
+	);
+}