Button doesn't load custom route

Jakey

2 weeks ago

24

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

• 

  jmikrut

  Payload Team

  2 weeks 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

• 

  Jakey

  2 weeks 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

• 

  jmikrut

  Payload Team

  2 weeks ago

  hmm, i linked to the wrong property

  
  

  
  

  it is

  routes
• 

  Jakey

  2 weeks 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

• 

  jmikrut

  Payload Team

  2 weeks ago

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

• 

  Jakey

  2 weeks 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

• 

  jmikrut

  Payload Team

  2 weeks 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

• 

  patrikkozak

  Payload Team

  2 weeks 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

• 

  Jakey

  last week

  i think you got it right @patrikkozak

• 

  patrikkozak

  Payload Team

  last week

  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!

• 

  Jakey

  last week

  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.