Button doesn't load custom route

default discord avatar
jakey___
6 months ago
24

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.

  • discord user avatar
    jmikrut
    Payload Team
    6 months ago

    hey @jakey___ 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


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

  • default discord avatar
    jakey___
    6 months ago

    I'm in a plugin i'm developing (client-specific need), so i'm extending an incoming config like so

    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

  • discord user avatar
    jmikrut
    Payload Team
    6 months ago

    hmm, i linked to the wrong property



    it is

    routes
  • default discord avatar
    jakey___
    6 months ago

    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

  • discord user avatar
    jmikrut
    Payload Team
    6 months ago

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

  • default discord avatar
    jakey___
    6 months ago

    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

  • discord user avatar
    jmikrut
    Payload Team
    6 months ago

    i have no idea



    something that we need to look into



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

  • discord user avatar
    patrikkozak
    Payload Team
    6 months ago

    @jmikrut Yeah for sure!



    Hey @jakey___, 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

  • default discord avatar
    jakey___
    6 months ago

    i think you got it right @patrikkozak

  • discord user avatar
    patrikkozak
    Payload Team
    6 months ago

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



    Hey @jakey___ - 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!

  • default discord avatar
    jakey___
    6 months ago

    Thanks! I'll add to this post if there's more info that'll help explain what's going on on my end if I find any.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.