Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Button doesn't load custom route

default discord avatar
jakey___2 years ago
11

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
    2 years ago

    hey

    @214419801039175682

    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___2 years 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
    2 years ago

    hmm, i linked to the wrong property



    it is

    routes
  • default discord avatar
    jakey___2 years 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
    2 years ago

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

  • default discord avatar
    jakey___2 years 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
    2 years ago

    i have no idea



    something that we need to look into



    @1032341301619871785

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

  • discord user avatar
    patrikkozak
    2 years ago
    @364124941832159242

    Yeah for sure!



    Hey

    @214419801039175682

    , 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___2 years ago

    i think you got it right

    @1032341301619871785
  • discord user avatar
    patrikkozak
    2 years ago

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



    Hey

    @214419801039175682

    - 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___2 years 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.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.