Button doesn't load custom route | Payload | Page 1

frozen yoke May 17, 2023, 4:56 PM

#

This is probably very simple but I'm just not seeing it.

I have a custom route that mimics somewhat the payload dashboard page using a button component like so:

import React from 'react'
import { DefaultTemplate } from 'payload/components/templates'
import { useConfig } from 'payload/components/utilities'
import { AdminView } from 'payload/config'
import { Button, Card } from 'payload/components/elements'
import { useHistory } from 'react-router-dom'
import './index.scss'

const baseClass = 'thing-ui'

const CustomUi :AdminView = () => {
    const { routes: { admin: adminRoute } } = useConfig()
    const { push } = useHistory()
    return (
        <DefaultTemplate className={baseClass}>
            <Card
                title={'Example'}
                id={`card-example`}
                onClick={() => push({ pathname: `${adminRoute}/custom/thing` })}
                actions={(
                    <Button
                        el="link"
                        to={`${adminRoute}/custom/thing`}
                        icon="plus"
                        round
                        buttonStyle="icon-label"
                        iconStyle="with-border"
                    />
                )}
            />
        </DefaultTemplate>
    )
}

export default CustomUi

When I click this button, the url changes, but it doesn't change to the actual page to the next custom route component I configured.

Scratching my head on why this would be...I think I'll just avoid extra routes for now I suppose but if anyone has any thoughts I'd appreciate them.

quasi geode May 17, 2023, 4:59 PM

#

hey @frozen yoke where did you add your custom route itself? can you get to it by navigating to its URL directly?

#

https://github.com/payloadcms/payload/blob/master/test/admin/config.ts#L51

GitHub

payload/config.ts at master · payloadcms/payload

Built with React + TypeScript, Payload is a free and open-source Headless CMS. [✩Star] if you support our work! - payload/config.ts at master · payloadcms/payload

#

we do have an example of this working in our tests folder

frozen yoke May 17, 2023, 5:03 PM

#

I'm in a plugin i'm developing (client-specific need), so i'm extending an incoming config like so ```js
import path from 'path'
import { Config, Plugin } from 'payload/config'
import AfterNavLinks from './afterNavLinks'
import endpoints from './endpoints'
import Terms from './collections/Terms'
import DashboardUi from './ui'
import SomeToolUi from './ui/someTool'

const customPluginName :Plugin = (incomingConfig :Config) :Config => {
const config :Config = {
...incomingConfig,
admin: {
...incomingConfig.admin,
components: {
...incomingConfig.admin.components,
routes: [
{
Component: DashboardUi,
path: '/tools/dashboard',
},
{
Component: SomeToolUi,
path: '/tools/some-tool',
},
],
afterNavLinks: [ AfterNavLinks ],
},
},
}
return config
}```

#

( i pulled out the unrelated stuff )

#

hmm, i don't think i touched the view property. checking that out

quasi geode May 17, 2023, 5:13 PM

#

hmm, i linked to the wrong property

#

it is routes

frozen yoke May 17, 2023, 5:15 PM

#

the dashboard route works fine when i link to it from the afterNavLink I added, but when I use the button code, it doesn't

#

interesting

#

my example wasn't totally accurate it looks like. the difference between the two routes is more like
/tools/dashboard
/tools/dashboard/some-tool

#

when i switched it to something like
/tools/dashboard-some-tool
it worked

quasi geode May 17, 2023, 5:19 PM

#

ok so it's only the link that is nested more than 2 levels deep that does not work?

frozen yoke May 17, 2023, 5:19 PM

#

yeah, I'm totally fine avoiding the 2 levels deep thing though. not sure if there's a good reason why it's like that atm

#

I appreciate your feedback here!! thank you

quasi geode May 17, 2023, 5:22 PM

#

i have no idea

#

something that we need to look into

#

@snow wadi can you add this to your list to check into? custom admin UI routes more than 2 levels deep

snow wadi May 17, 2023, 5:23 PM

#

@quasi geode Yeah for sure!

snow wadi May 19, 2023, 7:48 PM

#

Hey @frozen yoke, just to double check - let me make sure I am understanding everything correctly:

You have a custom route and on this route you are rendering the button component
This button links to another custom route
but when clicking the button, although the url changes, the page does not change to what the corresponding custom route is rendered with
Your different custom routes are being defined in the customPluginName config
And if the button is linked to a custom route that is more than 2 levels deep e.g. /tools/dashboard/some-tool - it doesn't render the route page?
But if its less than that e.g. /tools/dashboard-some-tool - it works just fine?

Just want to clarify everything for testing purposes

frozen yoke May 19, 2023, 7:57 PM

#

i think you got it right @snow wadi

snow wadi May 19, 2023, 8:04 PM

#

Perfect, I'm looking into it - I'll get you some answers asap

snow wadi May 22, 2023, 5:17 PM

#

Hey @frozen yoke - I went ahead and tested the above in a few different ways and was unable to re-create the issue where trying to hit a route more than 2 levels deep did not work properly.

E.g. using the button component and linking to routes /tools or /tools/dashboard or /tools/dashboard/some-tool all properly worked for me.

The url changed and the page also changed to the corresponding content that existed on those specific routes.

If there is any other way I can help or anything else you need, let me know!

#Button doesn't load custom route