From ae6a80d3e20b3afa7285af69b61c569f9fbd13c3 Mon Sep 17 00:00:00 2001 From: luandro Date: Fri, 6 Sep 2024 08:58:51 -0300 Subject: [PATCH] feat: update routing, add error boundary Updates the routing to use React Router's createBrowserRouter. Adds a custom ErrorBoundary component to catch and display errors that occur while navigating or rendering the application. --- index.html | 4 ++-- src/App.jsx | 27 +++++++++++++++++++-------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index fc8b34b..7393cdd 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,10 @@ Awana Digital | Encontro 2024 - +
- + diff --git a/src/App.jsx b/src/App.jsx index 176d342..232427a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,22 +1,33 @@ import { Toaster } from "@/components/ui/sonner"; import { TooltipProvider } from "@/components/ui/tooltip"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { navItems } from "./nav-items"; const queryClient = new QueryClient(); +// Create a custom ErrorBoundary component +const ErrorBoundary = ({ error }) => ( +
+

Oops! Something went wrong.

+

{error?.message || 'An unexpected error occurred.'}

+
+); + +const router = createBrowserRouter( + navItems.map(({ to, page }) => ({ + path: to, + element: page, + errorElement: , // Add errorElement prop to each route + })), + { basename: import.meta.env.BASE_URL } +); + const App = () => ( - - - {navItems.map(({ to, page }) => ( - - ))} - - + );