Unnecessary Remounts in nested routes.

[Shri]

I am having an app where there is a two-column layout. Something that looks like this:

In the above, before clicking on a list item, the route is /users. When you click on an item, the route changes to /users/:id. But when the route changes, the user list also seem to remount from first and load again. Is there any way to avoid this?

My router code:

<Page>
  <Route path="/">
    <Accounts />
  </Route>
  <Route path="/users">
    <Accounts />
  </Route>
  <Route path="/users/:id"> {(params) => <Accounts id="{params.id}" />} </Route>
  <Route path="/applications">Applications</Route>
</Page>

And the Accounts component looks something like this:

export default function Accounts(params) {
  return (
    <Page>
      <div className="relative h-full w-full flex">
        <UserList
          id={params.id}
          className={`${params.id ? "hidden" : "block"} md:block`}
        />
        <UserDetail
          id={params.id}
          className={`${params.id ? "flex" : "hidden"} md:flex`}
        />
      </div>
    </Page>
  );
}

Here's a demo of what's happening:

wouter.mp4

[Shri]

I fixed this by using <Switch> component.