@clerk/react hijacks react-router-dom and causes a page reload for UserProfile.Page components

[arximughal]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

NA

Publishable key

Description

Steps to reproduce:

I have the bleow code in my Account page that shows UserProfile. I need some custom pages underneath it and I am using UserProfile.Page to add the nested routes. These routes do not explicitly render any components but use Outlet from react-router-dom to make sure it can show dynamic routes etc.

    <UserProfile appearance={{ baseTheme: dark }} routing="path" path="/account">
        <UserProfile.Page label="Organizations & Users" labelIcon={<Building2 size={14} />} url="organizations">
          <Outlet />
        </UserProfile.Page>
      </UserProfile>

Here are the routes:

export const userRoutes = [
  {
    path: "/account/*",
    element: <AccountPage />,
    children: [
      {
        path: 'organizations',
        element: <OrganizationsPage />,
      },
      {
        path: "organizations/:orgId",
        element: <EditOrgLayout />,
        children: [
          {
            index: true,
            path: 'info',
            element: <EditOrganizationInfo />,
          },
        ],
      },
    ],
  },
];

Expected behavior:

Expected behavior is for Clerk to respect the React Router DOM's routes and switch between routes without causing a page load.

Actual behavior:

Right now, switching between "Profile" and "Security" tabs causes a page reload as well as all the other routes I add to this component using UserProfile.Page.

Is there any solution to this?

Environment

System:
    OS: macOS 15.3.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 124.83 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 10.6.1 - ~/.nvm/versions/node/v20.16.0/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.142
    Safari: 18.3
  npmPackages:
    @babel/preset-env: ^7.26.0 => 7.26.0 
    @babel/preset-react: ^7.26.3 => 7.26.3 
    @clerk/clerk-react: ^5.22.11 => 5.22.11 
    @clerk/themes: ^2.2.16 => 2.2.16 
    @eslint/js: ^9.17.0 => 9.17.0 
    @hookform/resolvers: ^4.1.0 => 4.1.0 
    @radix-ui/react-avatar: ^1.1.3 => 1.1.3 
    @radix-ui/react-checkbox: ^1.1.4 => 1.1.4 
    @radix-ui/react-collapsible: ^1.1.3 => 1.1.3 
    @radix-ui/react-dialog: ^1.1.6 => 1.1.6 
    @radix-ui/react-dropdown-menu: ^2.1.6 => 2.1.6 
    @radix-ui/react-icons: ^1.3.2 => 1.3.2 
    @radix-ui/react-label: ^2.1.2 => 2.1.2 
    @radix-ui/react-navigation-menu: ^1.2.3 => 1.2.3 
    @radix-ui/react-scroll-area: ^1.2.3 => 1.2.3 
    @radix-ui/react-select: ^2.1.4 => 2.1.4 
    @radix-ui/react-separator: ^1.1.2 => 1.1.2 
    @radix-ui/react-slot: ^1.1.2 => 1.1.2 
    @radix-ui/react-switch: ^1.1.2 => 1.1.2 
    @radix-ui/react-tabs: ^1.1.3 => 1.1.3 
    @radix-ui/react-tooltip: ^1.1.8 => 1.1.8 
    @reduxjs/toolkit: ^2.5.0 => 2.5.0 
    @shadcn/ui: ^0.0.4 => 0.0.4 
    @testing-library/jest-dom: ^6.6.3 => 6.6.3 
    @testing-library/react: ^16.1.0 => 16.1.0 
    @testing-library/user-event: ^14.5.2 => 14.5.2 
    @vitejs/plugin-react: ^4.3.4 => 4.3.4 
    autoprefixer: ^10.4.20 => 10.4.20 
    axios: ^1.7.9 => 1.7.9 
    babel-jest: ^29.7.0 => 29.7.0 
    class-variance-authority: ^0.7.1 => 0.7.1 
    clsx: ^2.1.1 => 2.1.1 
    eslint: ^9.17.0 => 9.17.0 
    eslint-config-prettier: ^9.1.0 => 9.1.0 
    eslint-plugin-react: ^7.37.3 => 7.37.3 
    eslint-plugin-react-hooks: ^5.1.0 => 5.1.0 
    eslint-plugin-react-refresh: ^0.4.16 => 0.4.16 
    globals: ^15.14.0 => 15.14.0 
    husky: ^9.1.7 => 9.1.7 
    i18next: ^24.2.1 => 24.2.1 
    i18next-browser-languagedetector: ^8.0.2 => 8.0.2 
    identity-obj-proxy: ^3.0.0 => 3.0.0 
    jest: ^29.7.0 => 29.7.0 
    jest-environment-jsdom: ^29.7.0 => 29.7.0 
    lucide-react: ^0.471.2 => 0.471.2 
    next-themes: ^0.4.4 => 0.4.4 
    postcss: ^8.4.49 => 8.4.49 
    prettier: ^3.4.2 => 3.4.2 
    prop-types: ^15.8.1 => 15.8.1 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    react-helmet-async: ^2.0.5 => 2.0.5 
    react-hook-form: ^7.54.2 => 7.54.2 
    react-i18next: ^15.4.0 => 15.4.0 
    react-redux: ^9.2.0 => 9.2.0 
    react-router-dom: ^7.1.1 => 7.1.1 
    redux: ^5.0.1 => 5.0.1 
    redux-observable: ^3.0.0-rc.2 => 3.0.0-rc.2 
    redux-persist: ^6.0.0 => 6.0.0 
    rxjs: ^7.8.1 => 7.8.1 
    sonner: ^2.0.1 => 2.0.1 
    tailwind-merge: ^2.6.0 => 2.6.0 
    tailwindcss: ^3.4.17 => 3.4.17 
    tailwindcss-animate: ^1.0.7 => 1.0.7 
    vite: ^6.0.5 => 6.0.7 
    zod: ^3.24.2 => 3.24.2

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

[clerk-cookie]

Hello 👋

In an effort to keep our GitHub issues clean and focused, we close any issues that are awaiting a reproduction after 8 days on inactivity, and it has been 7 days. This issue will be closed tomorrow unless a reproduction is provided. If it takes longer than this to get a reproduction, that's ok, just drop a comment and we will remove the Stale label.

How to create a minimal reproduction

Thanks for being a part of the Clerk community! 🙏

[clerk-cookie]

After 8 days without a reproduction being supplied, we are closing this issue. Keep in mind, I'm just a robot, so if I've closed this issue in error, please reply here and my human colleagues will reopen it. Likewise if a reproduction is prepared after it has been closed.