Next.js Discord

Discord Forum

is it possible to "read" a defined route as if it's a parameter?

Unanswered
Large garden bumble bee posted this in #help-forum
Open in Discord
Large garden bumble beeOP
I have a project structure like this under app/(auth)/sign-in
.
├── apple
│   └── page.tsx
├── otp
│   └── page.tsx
├── layout.tsx
└── page.tsx

In the layout, I effectively want to do something like this:
function SignInLayout() {
  return (
    // ... most of this doesn't matter
    <ul>
      {routes.map((route) => {
        return (
          <li className={route === method ? 'hidden' : 'block'}>
            <Link href={`/sign-in/${route}`}>Sign in with {route}</Link>
          </li>
        )
      })}
    </ul>
  );
}

Basically, iterating the child routes of this part of the tree and rendering a link to there, hiding it if it matches the current route
Is there a way to do this with the app router?

3 Replies

LuisLl
Do you mean without having to do something like this?:

const AUTH_ROUTES = [
  {href:”/apple”},
  {href:”/otp”}
];

…

AUTH_ROUTES.map(…)
Are you asking for a way for the framework to handle you the routes available within the (auth) group?
- as far as I know this isn’t a thing in Next.js

Are you asking how to dynamically show all the routes except for the one that’s currently active?
- for this you might wanna make a client component that uses the usePathname() hook
Large garden bumble beeOP
I guess I could solve this in one way by making a [method] route parameter and reading that, then rendering different components like so:
function LoginByMethod({ params: { method } }) {
  switch (method):
    case 'otp':
      return <OTPLogin />
    case 'apple':
      return <AppleLogin />
    default:
      return <PasswordLogin />
}

It's just a bit messier than I'd like, so I was hoping I could just enumerate them