Description
Which project does this relate to?
Router
Describe the bug
We have a hybrid project, with the backend written in PHP and the frontend partly in React.
Because the frontend is only partly in react, we may have pages in non-React, that points to pages in React.
We try to serialize the queryParams in the same way as TanStack/Router does (basically just json_encoding), but we've found, that the order of the properties in the json_encoded data is very important (and needlessly important in our mind).
In the specific Route we have a zod schema for defining and validating the search data, but when the properties aren't in the correct order we just get a white screen.
We found the issue to be, that the loader
-method doesn't receive the context
when the order of the properties in the search object isn't correct.
So, lets say the the schema is:
import z from "zod";
const schema = z.object({
foo: z.number(),
bar: z.number(),
}};
and we call the endpoint with JSON.stringify({foo: 1, bar: 2})
, then it all works.
But if we instead call with JSON.stringify({bar: 1, foo: 2})
, then it doesn't work.
We've set up a codesandbox with a reproduceable codebase.
Your Example Website or App
https://codesandbox.io/p/devbox/27yztf
Steps to Reproduce the Bug or Issue
- Open https://codesandbox.io/p/devbox/27yztf
- Click the
a-href: data (works fine)
(in theasync beforeLoad
orsync beforeLoad
section) - See that the
loaderData
is filled - Click the
a-href: data inverted (...)
- See that the
loaderData
isn't filled - Reload the page
- See that the
loaderData
is now filled (the initial click on thea-href: data inverted
will go to the page with the properties inverted, but the router will automatically update the url with the properties in the correct order - so a refresh will "fix" the issue)
The only difference between the two links are the inverted order of the properties.
Expected behavior
The no matter which order the properties are JSON encoded will work just fine.
It's okay that the url is updated with the properties in the "correct" order, but the router should handle it internally and not break.
Screenshots or Videos
Recording.2025-05-02.135113.mp4
Platform
Test on
- OS: Windows
- Browser: Chrome
- Version: 135
Additional context
No response