solid-router, don't remount when component is the same between routes

Hi, let's say I have this simplified route config

[
  { path: "/", component: Home },
  { path: "/test", component: Home },
]

[
  { path: "/", component: Home },
  { path: "/test", component: Home },
]

When the user goes from / to /test, the whole component remounts, even though it's the same one Is there a way to force it to not re-mount it and only change the props? Normally it wouldn't be an issue, but there's a background video in the hero section that flickers when the page switches (because it's re-mounting the dom)

2 Replies

Maxon•7mo ago

I dont see how thats possible as you do a navigation and the dom nodes are not reused probably

peerreynders•7mo ago

It may be worth exploring whether you can make this work for your use case.

<Route path="/contract" component={ContractLayout}>
  <Route path="/" component={Contract} />
  <Route path="/prepare" component={Prepare} />
</Route>

<Route path="/contract" component={ContractLayout}>
  <Route path="/" component={Contract} />
  <Route path="/prepare" component={Prepare} />
</Route>

Basically both /contract and /contract/prepare use ContractLayout and navigating replaces Contract with Prepare within it. Now I'm not sure whether ContractLayout remains stable during the navigation (I suspect it will … because of "nested routing") but if it does a video withinContractLayout should remain stable. In config-based routing nested routes go on the children property.

Gaming

Programming

solid-router, don't remount when component is the same between routes