Router: Router doesn't catch navigate on "first render"

[ricardobrandao]

Hi,

I believe I've found the following issue: When a user navigates to a given path which immediately redirects to another one, the Router does not render properly. However, adding a setTimeout(() => ..., 0) around the navigate function will do the trick. Please note that this behaviour doesn't happen when the user uses the router links to navigate.

An example is available on the following codesandbox. Refreshing the browser on https://242q8r4q1y.codesandbox.io/working (the component with the setTimeout) will properly render the Redirected component. However, refreshing on https://242q8r4q1y.codesandbox.io/not-working will not render the component.

[ryanflorence]

Server rendering won't be able to catch that redirect, you should use a <Redirect /> component in your route config instead.

This happens because we haven't subscribed to the location until the component higher up the tree has mounted (LocationProvider). We should probably add a warning if we detect an attempt to redirect before the parent LocationProvider has subscribed and suggest using Redirect instead.

[chasemccoy]

@ryanflorence This same issue happens me when using the <Redirect /> component with Gatsby 2.

[akoolenbourke]

I'm using Gatsby 2 and getting the same problem. Uncaught redirect exceptions using redirectTo AND <Redirect> I also get an infinite loop for some reason but not sure if this is related.

[ckreiling]

To folks who have seen this issue, be sure to pass the noThrow Boolean prop into the Redirect component (<Redirect to="/some/other/url" noThrow />) if you're rendering it client-side. The docs for Redirect describe the prop in a bit more detail.

[akoolenbourke]

Thanks. I also figured this one out after much head scratching