Parallel routes intercepting the same route cached?

Question

I'm testing out the possibilities with parallel routes and intercepted routes. I ran into an issue/bug, maybe I'm doing something wrong, any advice/help would be very appreciated.

@sidepanel/projects and @sidepanel/team are both intercepting the same route /admin/create and admin/edit/[id]

If you intercept the the route from /team , the intercepted route is @sidepanel/team(...)admin/* Afterwards, if you go back and try and intercept the route from /projects the intercepted route displayed is @sidepanel/team(...)admin/* instead of @sidepanel/projects(...)admin/* The same happens if you try it the other way around. I have tried using force-dynamic, no joy.

I created a code sandbox and a git repo
https://codesandbox.io/p/github/criticalpixel/next-parallel-intercept-example
https://github.com/criticalpixel/next-parallel-intercept-example

Hoping to create a repo for next routing patterns since I cannot really find any good examples out there
that go beyond the basic usage. Anything more complex is hard to come by. Hoping to create a repo with good examples and patterns to help anyone else looking for examples.

First post, be easy on me ðŸ™‚

West African Crocodile · Accepted Answer

Adding a searchParams to the parallel route page fixes this issue. The correct parallel page is displayed when intercepted. Example updated on repo.

export default function Page({
  params,
  searchParams,
}: {
  params: string;
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  return (
    <>
      INTERCEPTED [@Sidepanel/team] (..)admin/create?{" "}
      {JSON.stringify(searchParams)}
    </>
  );
}

Parallel routes intercepting the same route cached?

1 Reply