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
@214419801039175682where did you add your custom route itself? can you get to it by navigating to its URL directly?
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
can you add this to your list to check into? custom admin UI routes more than 2 levels deep
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
i think you got it right
@1032341301619871785Perfect, 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!
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 dedicated engineering support directly from the Payload team.