fix: hide breadcrumbs on the main page

package.json

@@ -62,6 +62,7 @@
     "gh-pages": "^6.0.0",
     "msw": "^1.2.2",
     "postcss": "^8.4.18",
+    "postcss-nesting": "12.0.1",
     "prettier": "3.0.3",
     "standard-version": "^9.5.0",
     "storybook": "^7.1.0",

postcss.config.cjs

@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    "postcss-nesting": {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),

src/components/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 
 import Header from '@components/Header';
@@ -18,6 +18,8 @@ const growthbook = new GrowthBook({
 });
 
 function App() {
+  const location = useLocation();
+
   useEffect(() => {
     // eslint-disable-next-line no-console
     console.log(`App version: ${APP_VERSION}`);
@@ -43,12 +45,12 @@ function App() {
       browser: 'foo',
       url: 'foo',
     });
-  }, []);
+  }, [location]);
 
   return (
     <GrowthBookProvider growthbook={growthbook}>
       <Header />
-      <Breadcrumbs />
+      { location.pathname !== '/' && <Breadcrumbs /> }
       <Alert message="" />
       <Outlet />
     </GrowthBookProvider>

src/components/Breadcrumbs.tsx

@@ -1,19 +1,20 @@
 import { useMatches } from "react-router-dom";
-import './Breadcrumbs.css';
+
+import classes from './breadcrumbs.module.css';
 
 export function Breadcrumbs() {
-    let matches = useMatches();
-    let crumbs = matches
+    const matches = useMatches();
+    const 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">
+        <ol className={classes.breadcrumbs}>
             {crumbs.map((crumb, index) => (
-                <li key={index}>{crumb}</li>
+                <li className={classes.crumb} key={index}>{crumb}</li>
             ))}
         </ol>
     );

src/components/breadcrumbs.module.css

@@ -0,0 +1,18 @@
+.breadcrumbs {
+    display: flex;
+    flex-direction: row;
+    gap: .4rem;
+}
+
+.crumb {
+    &::after {
+        content: '>';
+        margin-left: .4rem;
+    }
+
+    &:last-child {
+        &::after {
+            content: '';
+        }
+    }
+}

src/index.jsx

@@ -20,9 +20,7 @@ const router = createBrowserRouter(
     {
       path: '/',
       element: <App />,
-      loader: ({ params }) => {
-        return params;
-      },
+      loader: ({ params }) => params,
       handle: {
         crumb: () => <Link to="/">Home</Link>,
       },
@@ -50,19 +48,15 @@ const router = createBrowserRouter(
         },
         {
           path: 'users',
-          loader: ({ params }) => {
-            return params;
-          },
+          loader: ({ params }) => params,
           handle: {
-            crumb: () => <p>Users</p>,
+            crumb: () => <span>Users</span>,
           },
           children: [
             {
               path: ':userName',
               element: <UserInfo />,
-              loader: ({ params }) => {
-                return params;
-              },
+              loader: ({ params }) => params,
               handle: {
                 crumb: (data) => <span>{data.userName}</span>,
               },