feat: close: #250 add breadcrumbs (#251)

src/components/App.tsx

@@ -4,6 +4,7 @@ import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 
 import Header from '@components/Header';
 import Alert from '@components/Alert';
+import Breadcrumbs from '@components/Breadcrumbs';
 
 // Create a GrowthBook instance
 const growthbook = new GrowthBook({
@@ -23,8 +24,7 @@ function App() {
 
     // Load feature definitions from API
     fetch(
-      `https://cdn.growthbook.io/api/features/${
-        import.meta.env.VITE_GROWTH_BOOK_KEY
+      `https://cdn.growthbook.io/api/features/${import.meta.env.VITE_GROWTH_BOOK_KEY
       }`,
     )
       .then((res) => res.json())
@@ -48,6 +48,7 @@ function App() {
   return (
     <GrowthBookProvider growthbook={growthbook}>
       <Header />
+      <Breadcrumbs />
       <Alert message="" />
       <Outlet />
     </GrowthBookProvider>

src/components/Breadcrumbs.css

@@ -0,0 +1,5 @@
+.breadcrumbs {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+}

src/components/Breadcrumbs.tsx

@@ -0,0 +1,22 @@
+import { useMatches } from "react-router-dom";
+import './Breadcrumbs.css';
+
+export function Breadcrumbs() {
+    let matches = useMatches();
+    let crumbs = matches
+        // first get rid of any matches that don't have handle and crumb
+        .filter((match) => Boolean(match.handle?.crumb))
+        // now map them into an array of elements, passing the loader
+        // data to each one
+        .map((match) => match.handle.crumb(match.data));
+
+    return (
+        <ol className="breadcrumbs">
+            {crumbs.map((crumb, index) => (
+                <li key={index}>{crumb}</li>
+            ))}
+        </ol>
+    );
+}
+
+export default Breadcrumbs;

src/index.jsx

@@ -1,6 +1,6 @@
 import { lazy, StrictMode, Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';
 
 import './index.css';
 
@@ -20,6 +20,12 @@ const router = createBrowserRouter(
     {
       path: '/',
       element: <App />,
+      loader: ({ params }) => {
+        return params;
+      },
+      handle: {
+        crumb: () => <Link to="/">Home</Link>,
+      },
       children: [
         {
           path: '/',
@@ -44,10 +50,22 @@ const router = createBrowserRouter(
         },
         {
           path: 'users',
+          loader: ({ params }) => {
+            return params;
+          },
+          handle: {
+            crumb: () => <p>Users</p>,
+          },
           children: [
             {
               path: ':userName',
               element: <UserInfo />,
+              loader: ({ params }) => {
+                return params;
+              },
+              handle: {
+                crumb: (data) => <span>{data.userName}</span>,
+              },
             },
           ],
         },