SignInPage not Working With React-Router

[aress31]

Steps to reproduce

• App.js:

  const App = () => {
    const theme = createTheme(getDesignTokens());
  
    return (
      <AppProvider
        theme={theme}
        router={routerConfig}
      >
        <NotificationsProvider>
          <Outlet />
        </NotificationsProvider>
      </AppProvider>
    );
  };
  
  export default App;

• routerConfig.js:

  const routerConfig = createBrowserRouter([
    {
      children: [
        {
          children: publicRoutes,
          element: <HeaderLayout />,
          id: "public",
        },
        {
          children: privateRoutes,
          element: <SidebarLayout />,
          id: "private",
          path: ":tenantId",
        },
      ],
      element: <App />,
      path: "/",
    },
  ]);
  
  export default routerConfig;

• publicRoutes.js:

  const publicRoutes = [
    {
      index: true,
      loader: () => redirect("sign-in"),
    },
    {
      element: <SignInView />,
      path: "sign-in",
    },
    {
      element: <SignUpView />,
      path: "sign-up",
    },
    {
      element: <ResetPasswordView />,
      path: "reset-password",
    },
  ];
  
  export default publicRoutes;

• headerLayout.js:

  const HeaderLayout = () => (
    <PageContainer>
      <Outlet context={{ component: "main" }} />
    </PageContainer>
  );
  
  export default HeaderLayout;

• signInView.js:

  const providers = [
    { id: "credentials", name: "Email and password" },
    { id: "google", name: "Google" },
    { id: "microsoft-entra-id", name: "Microsoft (Entra ID)" },
  ];
  
  const signIn = async (provider, formData, callbackUrl) => {
    console.log(`Signing in with ${provider.name}`);
  };
  
  const SignInView = () => {
    return <SignInPage signIn={signIn} providers={providers} />;
  };
  
  export default SignInView;

Current behavior

When I add the routerConfig property to the AppProvider, the sign-in page displays an error. However, commenting out the router prop resolves the issue. I suspect this might be related to compatibility with React Router. If anyone could assist, I would greatly appreciate it.

ERROR
Cannot read properties of undefined (reading 'get')
TypeError: Cannot read properties of undefined (reading 'get')
    at SignInPage (http://localhost:8888/static/js/bundle.js:155362:43)
    at renderWithHooks (http://localhost:8888/static/js/bundle.js:183880:22)
    at updateFunctionComponent (http://localhost:8888/static/js/bundle.js:187447:24)
    at beginWork (http://localhost:8888/static/js/bundle.js:189166:20)
    at HTMLUnknownElement.callCallback (http://localhost:8888/static/js/bundle.js:174136:18)
    at Object.invokeGuardedCallbackDev (http://localhost:8888/static/js/bundle.js:174180:20)
    at invokeGuardedCallback (http://localhost:8888/static/js/bundle.js:174237:35)
    at beginWork$1 (http://localhost:8888/static/js/bundle.js:194135:11)
    at performUnitOfWork (http://localhost:8888/static/js/bundle.js:193383:16)
    at workLoopSync (http://localhost:8888/static/js/bundle.js:193306:9)

Expected behavior

I expect my router definition to be parser, accepted and valid.

Context

No response

Your environment

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (129.0.2792.65)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.60 
    @mui/core-downloads-tracker:  6.1.5 
    @mui/icons-material: ^6.1.5 => 6.1.5 
    @mui/lab: ^6.0.0-beta.13 => 6.0.0-beta.13 
    @mui/material: ^6.1.5 => 6.1.5 
    @mui/private-theming:  6.1.5 
    @mui/styled-engine:  6.1.5 
    @mui/system:  6.1.5 
    @mui/types:  7.2.18 
    @mui/utils:  6.1.5 
    @mui/x-charts: ^7.22.0 => 7.22.0 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-data-grid: ^7.22.0 => 7.22.0 
    @mui/x-date-pickers: ^7.22.0 => 7.22.0 
    @mui/x-internals:  7.21.0 
    @toolpad/core: ^0.8.1 => 0.8.1 
    @toolpad/utils:  0.8.1 
    @types/react:  18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript:  4.9.5 

Search keywords: react-router

[apedroferreira]

You seem to be passing a React Router configuration to the router prop of the AppProvider, but these are not the same thing: they're completely different configurations.

If you use the AppProvider imported from @toolpad/core/react-router-dom you should not need pass a router prop to it.

Can you please follow the guide in https://mui.com/toolpad/core/introduction/integration/#react-router and let me know if you find any issues, or if there's anything that could be less confusing?

[bharatkashyap]

I'm adding an example as part of #4335 which should showcase how the SignInPage works in the Vite/React-Router scenario

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.