React-router: <Redirect> + Page Transitions cause warning in the console

[ciampo]

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)

[timdorr]

Simplest thing to do is just move up the Redirect in the tree. Wrap everything in a component either redirects or renders its children. See the auth example: https://reacttraining.com/react-router/web/example/auth-workflow

[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?

[timdorr]

Because that's just how React works. It's not doing anything special to handle a second render, that's not how you build declarative components. But as long as you're displaying it at the same point in your component tree, it won't re-render. Again, that's how the React reconciler works, as it will re-use the existing component instance (aka element) and won't do a second mount (where we do our rendering).

[jmikrut]

Well I think the issue is that transition-group re-renders the component (the route) that contains the <Redirect> with the various enter / exit states as the component transitions in or out.

Our code does not do any re-rendering directly. The simplest of route changes while using a <Redirect> and transition-group will render the <Redirect> ~4 times.

Basically this means without modifying <Redirect> in some way, we are restricted to not use it within a route that will be animating.

A note, we did fix this by using history.push instead, but it's a bummer that we can't use the <Redirect> for what it's for.