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.
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
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
hmm, i linked to the wrong property
it is
routes
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
ok so it's only the link that is nested more than 2 levels deep that does not work?
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
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
@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
i think you got it right @patrikkozak
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!
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
Discord
online
Get help straight from the Payload team with an Enterprise License.