Next.js Discord

Discord Forum

redirecting to nested routes using Link component

Unanswered
American Chinchilla posted this in #help-forum
Open in Discord
American ChinchillaOP
hey in my app i have a path /dashboard/{id} and then i want to be able to go to dashboard subpages like /dashboard/{id}/moderation but when i put that as href to Link component it results in /dashboard/moderation instead

7 Replies

@ReverseGem7 Send the code
American ChinchillaOP
in folder app/dashboard/[guildId] i have layout.tsx which renders this component 
const SidebarElements = [
  "General Settings",
  "Server Info",
  "Join / Leave Announcements",
  "Moderation",
]

function SidebarElement({ category }: { category: string }) {
  return (
    <Button
      variant="ghost"
      className="px-2 py-1 bold-5 w-100 text-left overflow-hidden select-none justify-start"
      asChild
    >
      <Link href="moderation">{category}</Link>
    </Button>
  )
}

export default function GuildSidebarSections() {
  const currentGuild = useCurrentGuild()

  return (
    <aside className="flex flex-col mx-4">
      <span className="mx-1 mt-2 text-center font-bold">
        {currentGuild.name}
      </span>
      <Separator className="my-2 bg-black dark:bg-white" />
      {SidebarElements.map((category, i) => (
        <SidebarElement key={i} category={category} />
      ))}
    </aside>
  )
}
and for now each redirects to /moderation for testing inside this Link component <Link href="moderation">{category}</Link>
@ReverseGem7 https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example
American ChinchillaOP
i dont see how does that help me
do i need to retrieve the guildId and pass it to href
like href={"/dashboard/123/moderation"}
ReverseGem7
Yes, instead a layout, create a Page.tsx, get the params and pass to the Link
export default function Page({ params }: { params: { guildId: string } }) {
  return <GuildSidebarSections guildId={params.guildId} />
}