Navigation in the admin panel is broken if routes.admin is set to "/"

[r1tsuu]

Link to reproduction

No response

Payload Version

3.0.0-beta.35

Node Version

20

Next.js Version

15rc

Describe the Bug

When setting routes.admin: "/" links in the admin panel don't have slash at the start, resolving into a string like "collections/admins" which is invalid and doesn't work, instead we need to apply slash like we expect "/collections/admins"

Also i would mention that if i change Payload joi Validation to accept admin.routes empty string value "" then it works like i expect with "/".

Reproduction Steps

1. Either use rewrites or change the directory of Payload admin pages
2. Set routes.admin to "/".
3. See that it breaks the navigation

Adapters and Plugins

No response

[JarrodMFlesch]

Hey @r1tsuu I think we should discuss what we want to do here. We would likely need to touch every file that uses adminRoute or routes.admin, and then adjust them accordingly. There are some places that will break if the admin route is "/" or "", bc the links or routes generated using it will be incorrect, i.e. "/admin/[route]" will become "//[route]".

You could in the meantime, add a redirect in your next config like so:

export default withBundleAnalyzer(
  withPayload({
    async redirects() {
      return [
        {
          destination: '/admin',
          permanent: true,
          source: '/',
        },
      ]
    },
  }),
)

[r1tsuu]

Hey @r1tsuu I think we should discuss what we want to do here. We would likely need to touch every file that uses adminRoute or routes.admin, and then adjust them accordingly. There are some places that will break if the admin route is "/" or "", bc the links or routes generated using it will be incorrect, i.e. "/admin/[route]" will become "//[route]".

You could in the meantime, add a redirect in your next config like so:

export default withBundleAnalyzer(
  withPayload({
    async redirects() {
      return [
        {
          destination: '/admin',
          permanent: true,
          source: '/',
        },
      ]
    },
  }),
)

The problem is that i don't want to do a redirect here, because what i want is to host the admin panel on a different domain from frontend which is on the same server too.
What i do is i'm using NextResponse.rewrite in the middleware.ts if req.host is for the admin. So my "real" route is still "/admin" and i didn't change any folder structure.
I sucessfully achieved this working with providing routes.admin: "" without any broken links.
I'm not sure if it sounds good but if we just map the "/" value to "" in our sanitize function or joi schema then it should be fine, no need to change something else!

[JarrodMFlesch]

@r1tsuu I tried that earlier, remapping inside the sanitize function. But after logging into the admin panel I was facing an issue with a Link component somewhere, saying the href was undefined 🤔

[jacobsfletch]

I've got a feature started for this on the feat/root-admin branch. I will pick back up on this work shortly.

[jacobsfletch]

@r1tsuu this should go out in the next release

[r1tsuu]

@r1tsuu this should go out in the next release

Cool, thank you

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.