Force remount on route change

[tepid flicker]

Can components be forced to re-mount when the URL changes?

In the Basic example, the blog post component stays mounted but gets new props on navigation. This is undesirable in some cases to prevent race conditions.

Usually you can do something like

<BlogPost data={data} key={id} />

to force a new instance when id changes. Is there an equivalent in tanstack router?

[sterile wadi]

@ebon spire Please checkout the question from @tepid flicker .
Is there a way to achieve this in the meantime?
I also have a use-case where the component should be remounted when a search parameter is changed.
I could use reloadDocument: true, but a doc-reload for my case is not user-friendly.
Thanks

[tepid flicker]

@sterile wadi I don't remember how we worked around this, maybe a wrapper component with a key= or something

[sterile wadi]

Thanks @tepid flicker for your response.
I tried it with key, but without success. Can you check, how you solved it?

[tepid flicker]

I don't have it available, can you share what you tried?

[sterile wadi]

export const Route = createFileRoute("/app/create-order/PR-OR-CO")({
  component: WrapperComponent,
});

function WrapperComponent() {
  const typeId = Route.useSearch({select: (s) => s.typeId);

  return <Component key={typeId} typeId={typeId} routeID="/app/create-order/PR-OR-CO" />
}

function Component() {
}

This should work, shouldn't it?

[tepid flicker]

That should do it. Are you sure Component is not re-mounting? Try adding a useEffect(() => console.log("mount"), []) to make sure

[ebon spire]

we had this previously. see

https://github.com/TanStack/router/issues/2990

and

https://discord.com/channels/719702312431386674/1316448877670563931

the concept for that is ready to be built, just needs someone doing it 🙂

[ebon spire]

ok I went ahead and implemented it 🙂