other-emerald

Force remount on route change

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} />

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

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

9 Replies

fascinating-indigo•11mo ago

@Manuel Schiller Please checkout the question from @Jake . 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

other-emeraldOP•11mo ago

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

fascinating-indigo•11mo ago

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

other-emeraldOP•11mo ago

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

fascinating-indigo•11mo ago

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() {
}

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?

other-emeraldOP•11mo ago

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

metropolitan-bronze•11mo ago

we had this previously. see https://github.com/TanStack/router/issues/2990 and https://discord.com/channels/719702312431386674/1316448877670563931

GitHub

No builtin mechanism for remounting on path param changes · Issue #...

Which project does this relate to? Router Describe the bug This issue is a result from a discussion I had with @schiller-manuel in https://discord.com/channels/719702312431386674/131644887767056393...

metropolitan-bronze•11mo ago

the concept for that is ready to be built, just needs someone doing it 🙂 ok I went ahead and implemented it 🙂

fascinating-indigo•10mo ago

@Manuel Schiller Thank you very much. Just what I needed. TanStack router is the best frontend-library I have ever worked with.

Gaming

Programming

Force remount on route change

Did you find this page helpful?