Why do you want to do this i am not getting, in custom layout you can render one child with for a given path, for like this you can conditionally render on what is current path basis

I know we can conditionally render children1 but that defeats the purpose of a reusable component

I want it to be as reusable as possible

Conditional render fine for like 2-4 pages but what about 10s of em?

parallel routes are for rendering pages tho. Like multiple pages on one page. vs i want to load one page and dynamic sidebar options/routes

or i could make the sidebar be treated as a page? that would work ig

So u want something like a table of contents?

yes like that.

i have like 3 route groups which uses common layout so i want to render the routes on aside, and their content on right.

maybe i getting confused with the problem.

If I understood it, do you want something like a navbar of certain routes, for that I would recommend that you save the routes in a json and then render it with a component in the layout

lemme tell my exact use:

i have a auth group that uses a layout to show image on left side and login, signup, etc forms on right side.

plus

i have a not-found page in app/not-found that uses this same layout
so to show this, it shows a 404 image on left side, content on right side.

so in this way i want to make the image as a second children to be passed.

conditional render will work for known routes but not for not-found pages right

Make a component with the layout and pass the img src as a prop and the content as a React.Node and then use the component on your page

yea so 2 children is not possible. others have to be set as prop

also, not related to question.

is there a way to render not-found inside a route group?
will this work?
/admin/(admin)/not-found.tsx

guess not

nvm

so u want something like this?

export function YourComponent({ children }: { children: React.ReactNode }) {
  return <div className="flex justify-between">{children}</div>;
}

export function Children1({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

export function Children2({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

// page.tsx
import { YourComponent, Children1, Children2 } from "./YourComponent";
import Image from "next/image";

export default function Page() {
  return (
    <YourComponent>
      <Children1>
        <Image src="/yourImage.jpg" alt="Your alt" width={100} height={100} />
      </Children1>
      <Children2>
        <p>children2</p>
      </Children2>
    </YourComponent>
  );
}

yes exactly

u cant but u can get the pathname and render conditional const pathname = usePathname()

yep gotcha