generous-apricot

Persist component between non-grouped routes?

Hey, My understanding is that you can persist components between routes by putting them into a group and then putting the components you want them to share in the layout of the group. But what if you have two routes which are already in different groups? Here's an example from a mobile site that we're working on: Navbar group - Feed page - Search page All of these contain the bottom navbar, which we'd like to persist since it animates as you switch between the tabs Breadcrumb group - Feed page - Post page All of these contain the top breadcrumb bar, which we'd like to persist since it animates when breadcrumbs are added / removed I'm sure we could find workarounds for these specific cases, but before we start digging into the weeds here, I was wondering if there is a general solution?

16 Replies

typical-coral•13mo ago

what does "persisting components" mean exactly?

generous-apricotOP•13mo ago

So let's say you have a mobile navbar at the bottom of your site that has a CSS animation such that when you press on a button, it animates colors. If you were to naively import the navbar into all of the relevant pages, the animation would abruptly stop when you click one of the buttons, since that would cause it to switch pages, thus unrendering the instance of the navbar on the previous page and rendering the instance on the new page. With layouts, we can avoid that as it "persists" the rendered component when moving across pages within the group. But then there is the issue described in my post above.

typical-coral•13mo ago

and how do you define a "group"? can you please provide a minimal complete example by forking one of the existing router examples on stackblitz?

generous-apricotOP•13mo ago

Yup, will do

generous-apricotOP•13mo ago

Hey, I just created an example: https://stackblitz.com/edit/tanstack-router-fzudtz?file=src%2Froutes%2Findex.tsx

user-0a

StackBlitz

Router Basic File Based Example (forked) - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

generous-apricotOP•13mo ago

This shows what I mean by "persisting" a component across routes

typical-coral•13mo ago

so can you move those components in a common parent route?

generous-apricotOP•13mo ago

The issue is that, the routes can't have a common parent route:

Search page      <-\
                  these have a common component
Feed page   <-\  <-/
             these have a common component
Post page   <-/

Search page      <-\
                  these have a common component
Feed page   <-\  <-/
             these have a common component
Post page   <-/

typical-coral•13mo ago

mutually exclusive... hm

generous-apricotOP•13mo ago

Yes exactly

typical-coral•13mo ago

so how do other routers solve this?

generous-apricotOP•13mo ago

Not sure haha

typical-coral•13mo ago

if others had a solution I am sure we could port it to tanstack router

generous-apricotOP•13mo ago

We were originally using Nextjs, there we were using Parallel routes Maybe that could work here?

typical-coral•13mo ago

yeah we don't have parallel routes yet but we will get there

generous-apricotOP•13mo ago

Ah okay got it, thanks!

Gaming

Programming

Persist component between non-grouped routes?

Did you find this page helpful?