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]

💀