Parallel Routes with Dynamic Routes

[bairrada97]

Summary

Im still confused with parallel routes, most of examples I see was related to modals. but what if I actually want to render multiple of the same routes in 1 page?

Here's my case:

I have the following route: date/@currentDate/[currentDate]/page.tsx, which translates for example to /date/2023-04-13

each page has a navigation Links with the previous 2 days, today and next 2 days. where the current date is the selected/active one

my layout.tsx looks like this:

export default function RootLayout({
  children,
  currentDate
}: {
  children: React.ReactNode;
  currentDate:  React.ReactNode;
}) {
  return <main>{currentDate}<main/>

the currentDate in layout will render the today's date, but I would like to know if its possible that I can specific say to render something like this:

export default function RootLayout({
  children,
  previousDate,
  currentDate,
  nextDate
}: {
  children: React.ReactNode;
  previousDate:  React.ReactNode;
  currentDate:  React.ReactNode;
  nextDate:  React.ReactNode;
}) {
  return <main>
    {previousDate}
    {currentDate}
    {nextDate}
  <main/>

I know this above snippet doesn't work but I hope it shows what Im looking for.
The intention is only render the previous day, current day, next day, always 3 days and they are dynamic because depends of what the current url date looks like.

Is this possible to achieve?

Additional information

No response

Example

No response

[danielgynn]

Any chance you figured this one out? Have a similar use case I want to work out

[QingShan-Xu]

me too

[oswaldoacauan]

The examples in the docs are currently too simple. Is very hard to understand and find decent content other than super basic examples.
Would be nice to have someone from the Next.js team to provide some light if it is possible to use Parallel routes with Dynamic Segments.

After some testing and re-reading the docs for the something that feels like the 100th time, I found the asnwer:
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#unmatched-routes

By default, the content rendered within a slot will match the current URL.

In the case of an unmatched slot, the content that Next.js renders differs based on the routing technique and folder structure.

[oswaldoacauan]

For the record, the use case I was trying to use parallel routes was the following:

• We have a sidebar with a lists of reviews, the data is fetched and rendered in the layout.
• We need users to be able to filter this list of reviews by "rating" for example.
• First idea was to just use query params and then filter accordingly in the layout, that does not work because layouts dont re-render when query params change.
• Second idea was to try to use parallel routes and render the sidebar as a segment and try to use dynamic routes within that segment to control the filters, that of course also does not work because this is not how they are intended to work.
• We will probably just have a client component and load the data there instead from the layout, not the best performance but 🤷🏻

[robertwbradford]

@oswaldoacauan do you have an example of your /app directory structure you were using for this?

[ChrisB1123]

Similar problem here too - I guess the question is "How to manage interactions between parallel routes"?

Also coming to the same conclusion as @oswaldoacauan. I guess interactions happen on the client, so it would sense that if you want a highly interactive interface, you're going to need to push more to the client.

[CptJJ]

@oswaldoacauan did you ever find a good solution for this? have an identical use case and been struggling to get everything smooth, current issue is that the list is refetched on all query parameter changes (say a ?selected="" to decide what content to show in the details view)

The solution would be to somehow opt parallel routes out of specific search params so that @list could refetch with ?q,filters,date,etc and @details could refetch with ONLY the ?selected

[ph1p]

I think I have found a solution to this problem. This is my file structure:

├── app
|  ├── custom-path
|  |  ├── @fist-slot
|  |  |  ├── default.tsx # <--------
|  |  |  └── page.tsx
|  |  ├── @second-slot
|  |  |  ├── [id]
|  |  |  |  └── page.tsx
|  |  |  └── default.tsx # <-------- 
|  |  ├── error.tsx
|  |  ├── layout.tsx
|  |  └── not-found.tsx

I have two slots (first-slot, second-slot). The first slot is a normal page. The second slot has a dynamic route. You can call this dynamic route with <link href="/custom-path/5">link</link>. But the call is only client-side! If you reload the page, it will give an error or display a 404 page. Of course we don't want that.

To load the content correctly, you need to use the default.tsx. I have imported the page.tsx there and returned it.
default.tsx is called if the path /custom-path/[id] is not found in the other directories.

default.tsx

import Page from './page';

export default function Default() {
  return <Page />;
}

[Aditya-aubergine]

I also have a similar use case, if someone finds a good solution apart from doing it all on the client side please help

[petejodo]

yeah my understanding of parallel routes after experimenting is that they are meant to be isolated and don't handle the case of the list + preview UI pattern very well

[pcpLiu]

So is the conclusion that parallel routing is not supposed to use with dynamic ones?

[JayMGurav]

hey folks, any progress on this?? I've scratched my head whole week but no luck in getting it work.

[marcusklausen]

https://www.reddit.com/r/nextjs/comments/1d9nay4/comment/l7irzwq/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

Apparently it's not working (not sure if it's suppose to work in 15 tho)

[JayMGurav]

yep, have tried and gave up on it, am rather using query params for now.

[marcusklausen]

I actually got it working looks something like this dont know if it's of any help

account/layout.tsx

import { Suspense } from 'react';

import SectionCard from './_components/section-card';

export default function Layout({
  broker,
  billing,
  settings,
}: {
  broker: React.ReactNode;
  billing: React.ReactNode;
  settings: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-stone-50">
      <main className="container mx-auto flex min-h-screen w-full max-w-7xl flex-col py-10">
        <div className="grid gap-8">
          <SectionCard
            title="Broker configuration"
            description="Manage your API keys and favorite symbols, for your primary broker."
          >
            {broker}
          </SectionCard>
          <SectionCard
            title="Billing"
            description="Manage your subscription and billing information."
          >
            <Suspense>{billing}</Suspense>
          </SectionCard>
          <SectionCard
            title="Account settings"
            description="Manage your account settings."
          >
            {settings}
          </SectionCard>
        </div>
      </main>
    </div>
  );
}

The main thing was the default.tsx files for me, i need those also for the parallel routes that were not dynamic if I recall right

Ah nevermind I removed the dynamic route and made static routes I see, but I'm pretty sure I had it working like this with dynamic routes in the parallel routes and changed it to static for other reasons. I'll leave this here regardless, sorry for the mixup.

"next": "^15.0.3"