Parallel Routes (named Outlets) Feature

[tyler-mitchell]

I was wondering if there were plans to introduce parallel routes similar to what exists in Next.js which allows for matching multiple routes in the same segment but being independent chunks and with a different data URL.

Here's a more indepth discussion on this feature that's being proposed in remix/react-router: remix-run/remix#5431

[mattiaz9]

This would take @tanstack/router to the next level!
I hope this is implemented soon.

[tannerlinsley]

It’ll come soon Tanner Linsley

…

On Nov 5, 2023 at 1:47 AM -0700, Mattia Dalzocchio ***@***.***>, wrote: This would take @tanstack/router to the next level! I hope this is implemented soon. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[eastack]

Hello, I am a frontend novice who just learned React for a month. I want to implement a 3-column layout where clicking a link in the first column updates the content in the second column, and then clicking a link in the second column updates the content in the third column. I spent a whole afternoon trying to figure it out but still couldn't make it work. If I use two <Outlet/> components in the same component, they would display the same content, until I searched and found this issue. But since English is not my native language and my frontend knowledge is very limited, even after reading it for a long time, I am still not sure if the feature mentioned in this issue is what I need. Or is there another way for me to implement the functionality I want?

[mattiaz9]

I believe this could be achieved with nested layouts.

• route 1: 1st column + outlet /root
• route 2: 2nd column + outlet /root/route-1-selection
• route 3: 3rd column: /root/route-1-selection/route-2-selection

[eastack]

Do you mean to implement it by nesting and nested routes in components? (I should have implemented it this way before). But now that I have used grid uniformly for layout, it seems that nesting causes some issues. Here are some related code snippets.

export default function Root() {
    return (
        <div className={classes.container}>
            <div className={classes.menubarHeader}>
                <Flex direction={"column"} align={"center"} justify={"center"} pt={"1"}>
                    <Avatar fallback={"N"}/>
                </Flex>
            </div>

            <div className={classes.sidebarHeader}>
                <Flex
                    align={"center"}
                    justify={"start"}
                    height={"100%"}
                    px={"5"}
                >
                    <Text size={"3"} weight={"bold"}>
                        模型编辑
                    </Text>
                </Flex>
            </div>
            <header className={classes.mainHeader}>
                <Header/>
            </header>

            <div className={classes.menubar}>
                <MenuBar menus={menus}/>
            </div>

            <div className={classes.sidebar}>
                <Outlet/>
            </div>

            <div className={classes.main}>
                <Outlet/>
            </div>
        </div>
    )

.container {
    display: grid;
    grid-template-areas:
            "menubarHeader sidebarHeader mainHeader"
            "menubar       sidebar       main";

    grid-template-columns: max-content max-content 1fr;
    grid-template-rows: max-content 1fr;
    width: 100vw;
    height: 100vh;
}

.menubarHeader {
    grid-area: menubarHeader;
    box-shadow: 1px 0 var(--gray-a4);
}

.sidebarHeader {
    grid-area: sidebarHeader;
    box-shadow: 1px 1px var(--gray-a4);
}

.mainHeader {
    grid-area: mainHeader;
    box-shadow: 0 1px var(--gray-a4);
}

.menubar {
    grid-area: menubar;
    width: min-content;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 0 var(--gray-a4);
}

.sidebar {
    display: flex;
    overflow: hidden;
    grid-area: sidebar;
    box-shadow: 1px 0 var(--gray-a4);
}

.main {
    grid-area: main;
    display: flex;
    overflow: hidden;
}

This is what it looks like now

[eastack]

Thank you very much for taking the time to reply to my question. Later I realized this might also be a layout issue. In the end, I used nested routes together with the subgrid feature in grid layout to achieve the effect I wanted.

[TomGruner85]

It’ll come soon Tanner Linsley
…
On Nov 5, 2023 at 1:47 AM -0700, Mattia Dalzocchio @.>, wrote: This would take @tanstack/router to the next level! I hope this is implemented soon. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.>

Any update on this?

[hyousi]

Could you please consider adding the parallel route feature to the Comparison section? This is a feature that remix currently lacks.

[TkDodo]

it's also a feature that TanStack router lacks AFAIK, but please feel free to update the comparison with a PR

[tannerlinsley]

Slated for after Start launches. Tanner Linsley TanStack LLC

…

On Aug 19, 2024 at 8:32 AM -0600, Tom Gruner ***@***.***>, wrote: > It’ll come soon Tanner Linsley > … > On Nov 5, 2023 at 1:47 AM -0700, Mattia Dalzocchio @.>, wrote: This would take @tanstack/router to the next level! I hope this is implemented soon. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.> Any update on this? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[aretrace]

💀

[aaazzam]

👋 folks! We're starting to adopt TanStack Router in a project, want to express interest in this feature!

[dashkan]

Named routes takes dialog, sheet, and any secondary screen routes to next level. I absolutely love the typed routing. Keep up the great work! Your libraries are all top notch.

[sebbean]

im interested as well :-)

[mosq-1to]

Long time without any update. Is it still on the plate? 🙏

[tannerlinsley]

Yes it is! We’re busy getting start out the door Tanner Linsley TanStack LLC

…

On Feb 4, 2025 at 4:43 AM -0700, Mateusz Komarnicki ***@***.***>, wrote: Long time without any update. Is it still on the plate? 🙏 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[aretrace]

🪩

[samueldrai]

Hi @tannerlinsley
Happy to help on this feature, but I can't find the linked pull request. Is there a list of requirements/roadmap for this feature? :)

[schiller-manuel]

there is no pull request yet. we will be starting to work on this once we hit stable in start

[samueldrai]

right, ping me anytime, more than happy to contribute :)

[paul-sachs]

I think we have a unique use case for parallel routes. In our case, we want to have dynamic paths nested under an entity name that depends on the entity type. For example, /$entity/following vs /$entity/code, following only exists if $entity is of type user but doesn't contain code since code only exists for when $entity is a repository. Currently this is possible but presents challenges if the entity contains the same subpath but renders something differently (say, /settings). I think parallel routes can help with those cases. We'll still have to guard our components from rendering on entities that don't support the route but I think that can be easily done with a wrapping component.

[adiq]

hey, as Start is out of the door; is there any chance that this feature would get some traction?

[tannerlinsley]

Start is still only RC. It’ll be a bit l longer, but soon!!

…

On Sep 29, 2025 at 11:00 AM +0200, Adrian Zmenda ***@***.***>, wrote: hey, as Start is out of the door; is there any chance that this feature would get some traction? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>