2

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?

Max
  • 754
  • 8
  • 24
  • Does it have the same behavior in `gatsby develop` as well as `gatsby build`? – Ferran Buireu May 04 '22 at 16:37
  • @FerranBuireu I am not quite sure how to run the output of Gatsby build locally. If you can give me a pointer I'll try it out. – Max May 04 '22 at 16:56
  • Just run `gatsby build` and once done `gatsby serve`. By default you'll see your built site at `localhost:9000/` – Ferran Buireu May 04 '22 at 17:08
  • @FerranBuireu 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```. – Max May 04 '22 at 18:18

1 Answers1

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • So is there a workaround to make it work during development, or is there another way to implement this that more closely resembles Gatsby best practices? – Max May 04 '22 at 22:38
  • It's Gatsby's behavior so as far as I know, there's nothing you can do rather than building your site locally and testing it. – Ferran Buireu May 05 '22 at 04:47
  • `gatsby build...` command, missed `s` – LuanLuanLuan Jul 06 '22 at 15:25