Values not loading on a server side render using <StaticRouter>

[jordanrastrick]

I'm having trouble getting use-query-params to correctly fetch query param values on a Server Side Render. We are using <StaticRouter> from react-router-dom, initialised as is standard with the known value of location from the request.

Looking at the source here it seems that the assumption is being made that on a SSR the query must be extracted from location.pathname rather than from location.search. However AFAICT <StaticRouter> puts the query string in location.search consistent with <BrowserRouter>.

It seems like it might make more sense just to test directly for the presence of location.search and only fallback to parsing pathname if the former is missing, rather than checking for window? (although I'm not sure if this approach would be compatible with other routing frameworks...)

I will in the meantime workaround this using rawQuery but it'd be nice for it to work out of the box to reduce complexity and allow us to phase out other query string related packages completely in favour of just using this.

Cheers.

[pbeshai]

I haven't used SSR, so the last fix was done by someone else who found it solved their problem (the window check). If you want to submit a PR for fixing this in a way that works better, please do

[jordanrastrick]

Sure, will do :-)

[Romcol]

Hi, I have the same problem with reach-router with 0.4.3 ! I found putting QueryParamProvider inside the Router and switching back to 0.3.3 did the trick:

<Router basepath="/"> <QueryParamProvider default reachHistory={globalHistory}> //routes definition </QueryParamProvider> </Router>

Actually we have to extract from location.search with reach-router.

Would be grateful for an update :-) I can help with the PR but not sure how to handle different configuration/router 👍

EDIT: Actually passing the provider inside the router introduced some bugs when using several useQueryParam hooks / concurrent update, switching back to 0.4.3 which works on client and looking for a way to fix it server-side.

-- Final solution --
I managed to make it work with 0.4.3 but using useQueryParams instead of useQueryParam. What you need to do is put the QueryParamProvider inside the router (w/ Reach Router) as above.

[dante-blitz]

Thanks for the solution @Romcol.

I cant seem to get it working with Gatsby.

Do you by any chance have this working in Gatsby?

[Romcol]

@dante-blitz Not with Gatsby but I have a similar SSR configuration as Gatsby/Next.js. Which router do you use? Reach router? React router?