[Bug]: Re-rendering while redirecting

[dominikspiertz]

What version of React Router are you using?

6.3.0

Steps to Reproduce

Think of the following routing structure for a user:

/users - Shows a list of users
---> /users/1 - Shows a detail section, which renders ui of sub navigation (tab navigation)
------> /users/1/profile - Subroute (tab) for user page

<Routes>
   <Route index element={<Page />} />
    <Route path={ID} element={<Page />}>
       <Route path={`${ID}${PROFILE}`} element={<Profile />} />
       <Route path={`${ID}${SETTINGS}`} element={<Settings />} />
       <Route index element={<Navigate to={`${ID}${PROFILE}`} replace />} />
    </Route>
</Routes>

Expected Behavior

We are currently migrating from react-router v5 to v6. From before we had a top level param matching, what user id and what tab was selected, so we could redirect the user to always show the first user and the first tab from parent components. Now we replaced the implementation by using nested child routes, so the routing params are not used anymore. The child component render the desired component using the <Outlet /> component.

When the user gets redirected from /users/1 to /users/1/profile, the transition of the redirect should be performed flawlessly.

Actual Behavior

Currently If the user selects a user from the users list (/users), this will redirect to /users/1 and finally to users/1/profile. Everytime the user now selects another (or the same) user from the list, the component that is getting rendered behind users/1/profile, which is <Profile /> is unmounted and mounted again. This leads to a flickering effect of the page where the component is getting re-rendered. In v5 this was working without issues and the same logic, except the usage of <Outlet />.

How can we memoize components to just receive newer inner data from the components within the route, but the route component persists in v6 just as before with v5?

[cramatt]

I think we are seeing the same issue, the entire tree re-renders if you are using Outlets at the top of the tree... watching.

[maciag-dev]

Seems like we have the same issue.

[sangayt1997]

Is there any solution to overcome this issue?