Reason Why Navigation not showing active

[gazi786]

I have the following code base:

  import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
  import MonetizationOnOutlinedIcon from '@mui/icons-material/MonetizationOnOutlined';
  import RequestQuoteOutlinedIcon from '@mui/icons-material/RequestQuoteOutlined';
  import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';
  import BuildOutlinedIcon from '@mui/icons-material/BuildOutlined';
  import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';
  import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
  import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
  import InventoryOutlinedIcon from '@mui/icons-material/InventoryOutlined';
  import PetsOutlinedIcon from '@mui/icons-material/PetsOutlined';
  import HomeRepairServiceOutlinedIcon from '@mui/icons-material/HomeRepairServiceOutlined';
  import TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined';
  
  const Navigations = [
      {
          kind: 'header',
          title: 'General'
      },
      { segment: 'dashboard', title: 'Dashboard', icon: <DashboardOutlinedIcon /> },
      {
          segment: 'sales',
          title: 'Sales',
          icon: <MonetizationOnOutlinedIcon />,
          children: [
              {
                  segment: 'quotes',
                  title: 'Quotes',
                  icon: <RequestQuoteOutlinedIcon />,
                  children: [
                      {
                          segment: 'add-quote',
                          title: 'Add Quote'
                      },
                      {
                          segment: 'view-quotes',
                          title: 'View Quotes'
                      }
                  ]
              },
              {
                  segment: 'orders',
                  title: 'Orders',
                  icon: <ShoppingCartOutlinedIcon />,
                  children: [
                      {
                          segment: 'add-order',
                          title: 'Add Sales Order'
                      },
                      {
                          segment: 'view-orders',
                          title: 'View Sales Orders'
                      }
                  ]
              }
          ]
      },
      ...
  ];
  export default Navigations;

I import the navigation in my AppLayout..

  import React, { forwardRef, useState, useEffect } from 'react';
  import { AppProvider } from '@toolpad/core/AppProvider';
  import { Outlet, useLocation, useNavigate } from 'react-router-dom';
  import Navigations from '../routes/navigation';
  import logo from '../assets/images/logo2.png';
  import { globalStyles } from '../styles/global.styles';
  import { theme } from '../theme';
  
  const AppLayout = forwardRef((props, ref) => {
      const [screenName, setScreenName] = useState('Customer Selector');
      const [customerName, setCustomerName] = useState('');
      const location = useLocation();
      const currentPath = location.pathname;
      const navigate = useNavigate();
  
      const [isMobile, setIsMobile] = useState(false);
  
      useEffect(() => {
          const handleResize = () => setIsMobile(window.innerWidth <= 600);
          window.addEventListener('resize', handleResize);
          handleResize(); // Initial check
          return () => window.removeEventListener('resize', handleResize);
      }, []);
  
      const branding = {
          logo: <img style={globalStyles.logoImage(isMobile)} src={logo} alt="CRV" />,
          title: ''
      };
 
      return (
          <AppProvider navigation={Navigations} branding={branding}>
              <Outlet
                  context={{
                      onScreenChanged: handleScreenChanged
                  }}
              />
          </AppProvider>
      );
  });
  
  AppLayout.displayName = 'AppLayout';
  export default AppLayout;

However the navigation doesnot show active for the specific URL.

Below is my route using react-router-dom v6

  const RouteLayout = () => {
      const navRef = useRef(null);
      const routerOptions = {
          future: {
              v7_fetcherPersist: true,
              v7_normalizeFormMethod: true,
              v7_partialHydration: true,
              v7_relativeSplatPath: true,
              v7_skipActionErrorRevalidation: true,
              v7_startTransition: true
          }
      };
  
      const router = createBrowserRouter(
          [
              {
                  element: <AppLayout />,
                  children: [
                      {
                          path: '/',
                          element: <WorkspaceLayout />,
                          children: [
                              {
                                  path: '',
                                  element: <Dashboard />
                              },
                              ...allRoutes.map((route) => ({
                                  path: route.path,
                                  element: (
                                      <Suspense fallback={<PageLoader />}>
                                          <route.component ref={navRef} />
                                      </Suspense>
                                  )
                              }))
                          ]
                      }
                  ]
              },
              {
                  path: '/login',
                  element: <Login />
              },
              {
                  path: '/rssmlogin',
                  element: <RSSMLogin />
              },
              {
                  path: '*',
                  element: <NotFound />
              }
          ],
          routerOptions
      );
  
      return (
          <RouterProvider
              router={router}
              future={{
                  v7_startTransition: true
              }}
          />
      );
  };
  
  export default RouteLayout;

[bharatkashyap]

We might be able to better investigate if you created a minimal reproduction on CodeSandbox; till then, perhaps the issue lies in the way you are structuring the browser router object - can you try closely following the integration docs and see if it works?

[gazi786]

https://codesandbox.io/p/sandbox/toolpad-db-navigation-forked-hn3hz5?workspaceId=1902d688-70f7-408e-9d74-fdcfeefa0379

[apedroferreira]

Hi, I wasn't able to run the example in codesandbox but in the screenshot you shared there seems to be a very slight gray color around the "Dashboard" item.
So maybe it is selected and it's just an issue with the colors in the theme you're using?

[gazi786]

For some reason the Mui-Selected class doesnot get added.
From my app:

From example:

[gazi786]

@bharatkashyap I had to reinstall react-router-dom v6 as I removed it and installed the new version react-router v7. The navigation works now.