Skip to content

v7.4.1 broke createBrowserRouter() entirely #13334

@PlugNPush

Description

@PlugNPush

I'm using React Router as a...

library

Reproduction

Create a router using :

const routes = [...]

const router = createBrowserRouter([
    {
      element: (
        <SomeProviders>
          <LayoutAndOutlet />
        </SomeProviders>
      ),
      children: routes,
    },
  ]);

return <RouterProvider router={router} />;

Was working perfectly fine in V6 and V7. Newest version v7.4.1 made the router crash, I just get an empty content instead of my expected pages. Though, the router still recognizes the component that should be loaded from my route, as one of my page component has :

const [params] = useSearchParams();

Which instantly triggers the following error : useLocation() may be used only in the context of a <Router> component. -- so it is somehow still loaded

System Info

useLocation() may be used only in the context of a component.

System:
    OS: Linux 6.11 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-1360P
    Memory: 12.93 GB / 31.01 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 23.5.0 - ~/.nvm/versions/node/v23.5.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v23.5.0/bin/yarn
    npm: 11.2.0 - ~/.nvm/versions/node/v23.5.0/bin/npm
    pnpm: 9.15.0 - ~/.nvm/versions/node/v23.5.0/bin/pnpm
  Browsers:
    Chrome: 134.0.6998.165
  npmPackages:
    react-router: ^7.4.1 => 7.4.1 
    vite: ^6.2.3 => 6.2.3

Used Package Manager

npm

Expected Behavior

See the actual page for each route without any error

Actual Behavior

Error handled by React Router default ErrorBoundary: Error: useLocation() may be used only in the context of a component.

    invariant chunk-GNGMS2XR.mjs:188
    useLocation chunk-GNGMS2XR.mjs:4435
    useSearchParams chunk-GNGMS2XR.mjs:7998
    LogIn LogIn.tsx:15 <<------------------- My page loaded from my routes definition
    React 10
    performWorkUntilDeadline scheduler.development.js:44
    js scheduler.development.js:219
    js scheduler.development.js:364
    __require chunk-DC5AMYBS.js:9
    js index.js:6
    __require chunk-DC5AMYBS.js:9
    React 2
    __require chunk-DC5AMYBS.js:9
    js React
    __require chunk-DC5AMYBS.js:9
    <anonymous> react-dom_client.js:17892
 Component Stack: 
    DefaultErrorComponent chunk-XJI4KG32.mjs:4696
    RenderErrorBoundary chunk-XJI4KG32.mjs:4715
    DataRoutes chunk-XJI4KG32.mjs:5301
    Router chunk-XJI4KG32.mjs:5386
    RouterProvider chunk-XJI4KG32.mjs:5131 <<------------------- The react-router v7.4.1
    AppRoutes unknown:0 <<------------------- My component returning the RouterProvider
    div unknown:0
    App unknown:0

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions