No longer possible to put custom views under /collections/<slug>

[tyteen4a03]

Link to reproduction

No response

Environment Info

Node.js v22.7.0

Binaries:
Node: 22.7.0
npm: 10.8.2
Yarn: N/A
pnpm: 9.12.1
Relevant Packages:
payload: 3.0.0-beta.113
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:39:07 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10

Describe the Bug

Custom views in v3 no longer support routing views under /collection/<slug>, which used to be possible in v2.

I'm not sure if this is a bug or if this is intended. Either way, clarification would be good.

Reproduction Steps

Add a custom with a config like this:

                JobSheetDocument: {
                    Component: "@/modules/transport/components/JobSheetDocument/JobSheetDocument",
                    path: "/collections/jobs/:id/job-sheet",
                    exact: true,
                },

(the easiest way to check this is by modifying customParamViewPath to /collections/users/:id/view (

payload/test/admin/shared.ts

Line 11 in a526c7b

export const customParamViewPath = `${customParamViewPathBase}/:id`

)

Adapters and Plugins

No response

[JarrodMFlesch]

I think we could totally support this. We just need to put together a hard-coded list of slugs that could appear in the "/collections/:collectionSlug/:id/:pageSlug" pageSlug slot.

If we had all of those then we should be able to adjust the code here: https://github.com/payloadcms/payload/blob/beta/packages/next/src/views/Root/getViewFromConfig.ts#L180-L192

[jessrynkar]

Hi @tyteen4a03 - v3.37.0 does support this structure of view routing, however it would need to be added from within the collection config.

E.g., to setup your example route of /collections/jobs/:id/job-sheet, you would need to do:

export const Jobs: CollectionConfig = {
  slug: jobsSlug,
  admin: {
    components: {
      views: {
        edit: {
          jobs: {
            path: '/job-sheet',
            Component: '/your-custom-view-path',
          },
        },
      },
    },
  },
}

This route would get injected after /collections/jobs/:id allowing you to access /collections/jobs/:id/job-sheet.

Side note, I see you have another issue related to root-level routes which I will check out shortly.