[Bug]: previous route is still rendered during navigation with loader

[youri-oliver]

What version of React Router are you using?

6.15.0

Steps to Reproduce

https://stackblitz.com/edit/github-fmmzla

Click on "A route" and navigate to "B route"

Expected Behavior

During navigating from A to B, the A component should not be rendered...

Actual Behavior

During navigation from A to B, the A is still rendered. After the loader is finished with the setTimeout, the A is removed.

[youri-oliver]

Possible solution, but it feels kinda weird

{loading ? <Loader /> : <Outlet />}

The <Outlet /> should update itself?

[timdorr]

This is expected behavior: https://reactrouter.com/en/main/start/overview#pending-navigation-ui

[youri-oliver]

@timdorr So the <Outlet /> in the docs should be conditional as my "possible" solution, right? Else you are gonna have the problem I described...