[Bug]: React Router 6 blinks when using Navigate

[jdmoliner]

What version of React Router are you using?

6.6.2

Steps to Reproduce

I have made a simple example where you can check this problem.

If we click several times on the "Redirect" link ((which does a simple redirection) we will see that in version 6 the screen goes blank for a thousandth of a second. In version 5 it works perfectly doing the same thing.

When the rendering is a bit more complex this behaviour is very uncomfortable.

Example with version 6:

https://codesandbox.io/s/react-router-v6-blink-example-forked-zjtjry?file=/src/App.js

Example with version 5:

https://codesandbox.io/s/react-router-v5-blink-example-forked-mwe51e?file=/src/App.js

Expected Behavior

--

Actual Behavior

--

[piotrblasiak]

@jdmoliner were you able to find a solution to this?

[puopg]

You could try this.

https://codesandbox.io/p/sandbox/react-router-v6-blink-example-forked-cpxttc

Basically since my guess is Routes is unmounting an then remounting the same component, theres a DOM detach and insertion happening which is the blip. So in this example, we handle the base route the same way for normal sub path routes, and then inside of that, conditionally redirect. This way the <Routes/> always sees the same component, so theres no unmount happening.