Skip to content

Fetcher paths aren't normalized to remove search params when considered for fog-of-war #12896

@rossipedia

Description

@rossipedia

I'm using React Router as a...

library

Reproduction

Repro repository: https://github.com/rossipedia/qs-manifest-shenanigans

Steps:

  1. Run the project and open in browser
  2. Open browser dev tools to Network tab
  3. Start typing in the search box
  4. Notice that the querystring is included in requests to __manifest.

Since the querystring doesn't meaningfully contribute to route matching, it shouldn't be considered when determining whether or not a route is in the manifest already or not and fetched lazily.

Per @brophdawg11 the issue is here:

From the Discord thread:

@brophdawg11
for navigations we send location.pathname into patchRoutesOnNavigation but for fetchers we use the path passed to fetcher.load without first normalizing to a Location

Note

This was discovered in a [email protected] project. I would be very appreciative if the fix for this could be backported into a 2.15.3 release 🙏

System Info

System:
    OS: macOS 15.3
    CPU: (12) arm64 Apple M2 Max
    Memory: 554.45 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.local/state/fnm_multishells/45475_1738172097550/bin/node
    Yarn: 1.22.22 - ~/.local/state/fnm_multishells/45475_1738172097550/bin/yarn
    npm: 11.0.0 - ~/.local/state/fnm_multishells/45475_1738172097550/bin/npm
    pnpm: 9.15.4 - ~/.local/state/fnm_multishells/45475_1738172097550/bin/pnpm
    bun: 1.1.38 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 111.1.49.132
    Chrome: 132.0.6834.111
    Edge: 132.0.2957.127
    Safari: 18.3
  npmPackages:
    vite: ^5.1.0 => 5.4.14

Used Package Manager

npm

Expected Behavior

The URL Search Params are not included in the p= parameters sent to __manifest. I would expect a single __manifest request for any given route, independent of querystring values.

Actual Behavior

In a production application, we're seeing fetches to __manifest on every keypress of a typeahead component that include the querystring value in a call to fetcher.load():

Image

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