Gatsby navigate() with query parameters

Question

I am at an odd stuck point. I am trying to navigate programatically using navigate() from gatsby (I tried @reach/router as well). But whenever I add query parameters to the url like so:

const id = "001"
const title = "information"
navigate(`/subpage?id=${id}&title=${title}`);

I navigate to the 404 page ,despite the correct url showing in the address bar, including the parameters. Once I reload the page, everything works.

I found some answers but for some reason, none of them worked for me. Is there anything else you can think of that I am doing wrong here?

Answer 1

Thanks for the heads up. I just tried it and it seems as if the error only appears during development with gatbsy develop, not after running the build output with gatsby serve.

That's what I thought. This happens because Gatsby does redirects in production on navigation but it doesn't check if it should redirect during the initial render like the scenario you described in development.

Run:

gatsby build && gatsby serve

To build your site and see the expected result. The navigation should be fine.