Apps re-renders in every change in option from Sidebar

[NicoMartinic]

Everytime i select an option from the sidebar to then render a custom component, the hole app re-renders and then redirects to the component in question. This only happens with the children declared in the sidebar, in login or register this doesn't happend.

app.tsx

const NAVIGATION: Navigation = [
    {
      segment: 'home',
      title: 'Home',
      icon: <HomeIcon />,
    },
    {
      segment: 'customization',
      title: 'Customization',
      icon: <ColorLensIcon />,
    },
];
  return (
        <AppProvider
            navigation={Navigation} 
        >
            <Outlet/>
        </AppProvider>
  );

Index.tsx

const router = createBrowserRouter([
  {
    element: <App />,
    children: [
      {
        path: '/',
        element: <DashboardLayoutSlots />,
        children: [
          {
            path: '/',
            element: <Home />,
          },
          {
            path: '/home',
            element: <Home />,
          },
          {
            path: '/customization',
            element: <Customization />,
          },
        ],
      },
      {
        path: '/login',
        element: <LoginForm />,
      },
      {
        path: '/register',
        element: <Register />,
      },
    ],
  },
]);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
);

Home.tsx

import React from 'react';

const Home: React.FC = () => {

    return (
        <div>
            <h1>Welcome to the Home Page</h1>
            <p>This is the main content of the home page.</p>
            <p>Feel free to explore the features of our application.</p>
        </div>
    );
};

export default Home;

dashboardLayout.tsx

import { DashboardLayout, } from "@toolpad/core/DashboardLayout";
import { Outlet } from 'react-router-dom';

export default function DashboardLayoutSlots() {
  return (
      <DashboardLayout
      >
        <Outlet/>
      </DashboardLayout>
  );
}

[bharatkashyap]

I'm trying to recreate the issue in the Vite example CodeSandbox here: https://codesandbox.io/p/devbox/polished-currying-g35x6t

I can't see it, can you help try and create a minimal reproduction?

[iiNomad23]

We had this problem as well, it was caused by an incorrect import of AppProvider.
At that time we were using the @toolpad/core: ^0.8.1, I am not sure if this wrong import is still present in a newer version.

We fixed it here:
SMAIA-X/smaiax-frontend@37becb4

EDIT:
Typo

[NicoMartinic]

Yes, it was that. Thank you!

[Jiin-dom]

Yes, it was that. Thank you!

hi, may i know how you solved it?

[NicoMartinic]

With:
@toolpad/core": "^0.11.0
and React 18

In my App.tsx where it used to look like this:

import { AppProvider } from "@toolpad/core/AppProvider";

<AppProvider
    navigation={Navigation}  // Pass your navigation props
    theme={dynamicTheme}
    branding={Branding({'logoPath': logoPath})}      // Optional branding
    authentication={authentication} // Authentication logic
    session={session}        // Optional session logic
>

I change it to:

import { AppProvider } from '@toolpad/core/react-router-dom';

<AppProvider
    navigation={Navigation}  // Pass your navigation props
    theme={dynamicTheme}
    branding={Branding({'logoPath': logoPath})}      // Optional branding
    authentication={authentication} // Authentication logic
    session={session}        // Optional session logic
>

In another project where i'm using VITE i was able to do it as well with:

    "@toolpad/core": "^0.12.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",

App.tsx

import React from 'react';
import { Outlet } from 'react-router';
import SidebarFooterAccount from './components/dashboard/Account';
import { ReactRouterAppProvider } from '@toolpad/core/react-router';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { type Session } from '@toolpad/core/AppProvider';
import { SessionContext } from './components/context/SessionContext';
import NAVIGATION from './components/dashboard/Navigation';
import BRANDING from './components/dashboard/Branding';
import { useNavigate } from 'react-router';

export default function App() {
  const navigate = useNavigate();
  const storedUser = localStorage.getItem('user');
  const storedSession = storedUser ? { user: JSON.parse(storedUser) } : null;
  const [session, setSession] = React.useState<Session | null>(storedSession);
  const sessionContextValue = React.useMemo(() => ({ session, setSession }), [session]);

  const authentication = React.useMemo(() => ({
    signIn: () => {
      navigate('/login');
    },
    signOut: () => {
      localStorage.removeItem('user');
      setSession(null);
    },
  }), [navigate]);

  return (
    <SessionContext.Provider value={sessionContextValue}>
      <ReactRouterAppProvider
        navigation={NAVIGATION}
        authentication={authentication}
        session={session}
        branding={BRANDING}
      >
        <DashboardLayout
          slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
        >
          <Outlet />
        </DashboardLayout>
      </ReactRouterAppProvider>
    </SessionContext.Provider>
  );
}

Main.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router';
import App from './App';
import Home from './components/home/Home';
import Profile from './components/profile/Profile';
import LoginForm from './components/login/UserLogin';
import { NotificationProvider } from './components/context/NotificationContext';
import { BackendUrlProvider } from './components/context/BackendUrlContext';

const router = createBrowserRouter([
  {
    path: '/',
    Component: App, 
    children: [
      // App wraps only authenticated pages
      {
        path: '/',
        Component: Home,
      },
      {
        path: '/profile',
        Component: Profile,
      },
      {
        path: '/home',
        Component: Home,
      },
    ],
  },
  // Separate route without sidebar
  {
    path: '/login',
    Component: LoginForm, 
  },
]);


ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BackendUrlProvider>
      <NotificationProvider>
        <RouterProvider router={router} />
      </NotificationProvider>
    </BackendUrlProvider>
  </React.StrictMode>,
);