S
SolidJS•2mo ago
R2

"Issue Handling Query Parameters with Slashes (/) in SolidStart URLs".

"I’m building a SolidStart application, and I’m encountering an issue with handling URLs that contain query parameters with slashes (/) in their values. For example: http://localhost:3000/organizations/45 works perfectly because it uses path-based routing. http://localhost:3000/organizations?o=1/45 does not work as expected since this is exactly what i want. It seems like the / in the query parameter ?o=1/45 is being interpreted as part of the path instead of part of the query string.the url gets updated in the url search bar of my browser but the page does not update. - I tried encoding the / in the query parameter as %2F, so the URL becomes http://localhost:3000/organizations?o=1%2F45. However, this still doesn’t work. -I experimented with replacing / with other characters like - or :, and these work. However, I want to understand why the slash causes issues and how to fix it without changing the parameter format if possible. I expect http://localhost:3000/organizations?o=1/45 to work without breaking routing or query parameter handling.
2 Replies
peerreynders
peerreynders•2mo ago
Despite of how one may interpret the HTTP spec; this it how both Chromium and Firefox handle it: 
const params = new URLSearchParams();
params.append('o','1/45'));
console.log(params.toString()); // "o=1%2F45"
const params2 = new URLSearchParams('o=1%2F45');
console.log(params2.get('o')); // "1/45"
const params = new URLSearchParams();
params.append('o','1/45'));
console.log(params.toString()); // "o=1%2F45"
const params2 = new URLSearchParams('o=1%2F45');
console.log(params2.get('o')); // "1/45"
I'd take that as a strong hint that encodeURIComponent/decodeURIComponent may be called for in circumstances like this.
However, this still doesn’t work.
What exactly goes wrong? How exactly are you accessing these parameters? - search or query on the location of RouteSectionProps - search or query on the location from useLocation - useSearchParams
GitHub
solid-router/src/types.ts at 1c9eb8ed2cb70e4fa5a53d0d2836fc112e8ac4...
A universal router for Solid inspired by Ember and React Router - solidjs/solid-router
peerreynders
peerreynders•2mo ago
i assumed that every parameter is like a chain of some kind. if example.com/users/:id/:name ➜ /routes/users/[id]/[name].tsx then example.com/users?page=3/:id/:name ➜ /routes/users/[id]/[name].tsx
That is not how it works; see URIs. example.com/users/123/jane?page=3 ➜ /routes/users/[id]/[name].tsx With RouteSectionProps props.params.id and props.params.name lets you access the route parameter values while props.query['page'] lets you access the search parameter value.

Did you find this page helpful?