<Redirect> + Page Transitions cause warning in the console

Version

4.2.0

Test Case

https://codesandbox.io/s/13pykjo0wl

Steps to reproduce

1. Navigate to /
2. The router correctly redirects to /register, but shows a few warnings in the console: Warning: You tried to redirect to the same route you're currently on: "/register"

Expected Behavior

No warnings are shown

Actual Behavior

This is what I believe is happening.

Basically, in order to have the page transitions working correctly, the <Switch> needs to be provided with this.props.location, as it is immutable (unlike the history.location that is used by default). This guarantees that, during a transition to a new route, the page that is transitioning out still holds on the value of previous route.

Unfortunately, this seems to cause the warning when using <Redirect>: if the page that is transitioning out contains a Redirect, this page will keep triggering a route redirect, as its location will still hold on the value of old route.

You can have a look at this little demo to better understand the issue (have a look at the console logs)

[ciampo]

Thanks for pointing me to the auth workflow example. However, that example doesn’t have page transitions.

I made a new demo, based on your suggestions: https://codesandbox.io/s/6l4659qoor. I managed to get rid of the warnings, but at the cost of losing page transitions until the user is registered (try to click the button in the register page).

Is there anything better that I can do in order to have page transitions working while using <Redirect>?

[jmikrut]

@timdorr I don’t think your solution is universally acceptable.

We render redirects conditionally within a <Form> component based on responses returned by API calls. The <Redirect> therefore needs to be placed in the <Form> itself and we don’t have the luxury of simply moving the code.

What we’re working on now is trying to figure out how to render the <Redirect> only one time - but that’s easier said than done. Is there a reason why react-router does not include a way within the <Redirect> component to ensure that it only renders one time?