fix(admin-ui): split /dictionaries into layout + index for nested route
После regen routeTree.gen.ts /dictionaries/$name стал child route /dictionaries.
dictionaries.tsx рендерил карточки без <Outlet/> — клик по карточке менял URL,
но child компонент негде было рендерить, поэтому видна та же страница со списком.
Разнёс по конвенции:
- dictionaries.tsx — layout с <Outlet/>
- dictionaries.index.tsx — карточки списка (matches /dictionaries)
- dictionaries.$name.tsx — без изменений (matches /dictionaries/{name})
This commit is contained in:
@@ -11,6 +11,7 @@
|
|||||||
import { Route as rootRouteImport } from './routes/__root'
|
import { Route as rootRouteImport } from './routes/__root'
|
||||||
import { Route as DictionariesRouteImport } from './routes/dictionaries'
|
import { Route as DictionariesRouteImport } from './routes/dictionaries'
|
||||||
import { Route as IndexRouteImport } from './routes/index'
|
import { Route as IndexRouteImport } from './routes/index'
|
||||||
|
import { Route as DictionariesIndexRouteImport } from './routes/dictionaries.index'
|
||||||
import { Route as DictionariesNameRouteImport } from './routes/dictionaries.$name'
|
import { Route as DictionariesNameRouteImport } from './routes/dictionaries.$name'
|
||||||
|
|
||||||
const DictionariesRoute = DictionariesRouteImport.update({
|
const DictionariesRoute = DictionariesRouteImport.update({
|
||||||
@@ -23,6 +24,11 @@ const IndexRoute = IndexRouteImport.update({
|
|||||||
path: '/',
|
path: '/',
|
||||||
getParentRoute: () => rootRouteImport,
|
getParentRoute: () => rootRouteImport,
|
||||||
} as any)
|
} as any)
|
||||||
|
const DictionariesIndexRoute = DictionariesIndexRouteImport.update({
|
||||||
|
id: '/',
|
||||||
|
path: '/',
|
||||||
|
getParentRoute: () => DictionariesRoute,
|
||||||
|
} as any)
|
||||||
const DictionariesNameRoute = DictionariesNameRouteImport.update({
|
const DictionariesNameRoute = DictionariesNameRouteImport.update({
|
||||||
id: '/$name',
|
id: '/$name',
|
||||||
path: '/$name',
|
path: '/$name',
|
||||||
@@ -33,24 +39,31 @@ export interface FileRoutesByFullPath {
|
|||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/dictionaries': typeof DictionariesRouteWithChildren
|
'/dictionaries': typeof DictionariesRouteWithChildren
|
||||||
'/dictionaries/$name': typeof DictionariesNameRoute
|
'/dictionaries/$name': typeof DictionariesNameRoute
|
||||||
|
'/dictionaries/': typeof DictionariesIndexRoute
|
||||||
}
|
}
|
||||||
export interface FileRoutesByTo {
|
export interface FileRoutesByTo {
|
||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/dictionaries': typeof DictionariesRouteWithChildren
|
|
||||||
'/dictionaries/$name': typeof DictionariesNameRoute
|
'/dictionaries/$name': typeof DictionariesNameRoute
|
||||||
|
'/dictionaries': typeof DictionariesIndexRoute
|
||||||
}
|
}
|
||||||
export interface FileRoutesById {
|
export interface FileRoutesById {
|
||||||
__root__: typeof rootRouteImport
|
__root__: typeof rootRouteImport
|
||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/dictionaries': typeof DictionariesRouteWithChildren
|
'/dictionaries': typeof DictionariesRouteWithChildren
|
||||||
'/dictionaries/$name': typeof DictionariesNameRoute
|
'/dictionaries/$name': typeof DictionariesNameRoute
|
||||||
|
'/dictionaries/': typeof DictionariesIndexRoute
|
||||||
}
|
}
|
||||||
export interface FileRouteTypes {
|
export interface FileRouteTypes {
|
||||||
fileRoutesByFullPath: FileRoutesByFullPath
|
fileRoutesByFullPath: FileRoutesByFullPath
|
||||||
fullPaths: '/' | '/dictionaries' | '/dictionaries/$name'
|
fullPaths: '/' | '/dictionaries' | '/dictionaries/$name' | '/dictionaries/'
|
||||||
fileRoutesByTo: FileRoutesByTo
|
fileRoutesByTo: FileRoutesByTo
|
||||||
to: '/' | '/dictionaries' | '/dictionaries/$name'
|
to: '/' | '/dictionaries/$name' | '/dictionaries'
|
||||||
id: '__root__' | '/' | '/dictionaries' | '/dictionaries/$name'
|
id:
|
||||||
|
| '__root__'
|
||||||
|
| '/'
|
||||||
|
| '/dictionaries'
|
||||||
|
| '/dictionaries/$name'
|
||||||
|
| '/dictionaries/'
|
||||||
fileRoutesById: FileRoutesById
|
fileRoutesById: FileRoutesById
|
||||||
}
|
}
|
||||||
export interface RootRouteChildren {
|
export interface RootRouteChildren {
|
||||||
@@ -74,6 +87,13 @@ declare module '@tanstack/react-router' {
|
|||||||
preLoaderRoute: typeof IndexRouteImport
|
preLoaderRoute: typeof IndexRouteImport
|
||||||
parentRoute: typeof rootRouteImport
|
parentRoute: typeof rootRouteImport
|
||||||
}
|
}
|
||||||
|
'/dictionaries/': {
|
||||||
|
id: '/dictionaries/'
|
||||||
|
path: '/'
|
||||||
|
fullPath: '/dictionaries/'
|
||||||
|
preLoaderRoute: typeof DictionariesIndexRouteImport
|
||||||
|
parentRoute: typeof DictionariesRoute
|
||||||
|
}
|
||||||
'/dictionaries/$name': {
|
'/dictionaries/$name': {
|
||||||
id: '/dictionaries/$name'
|
id: '/dictionaries/$name'
|
||||||
path: '/$name'
|
path: '/$name'
|
||||||
@@ -86,10 +106,12 @@ declare module '@tanstack/react-router' {
|
|||||||
|
|
||||||
interface DictionariesRouteChildren {
|
interface DictionariesRouteChildren {
|
||||||
DictionariesNameRoute: typeof DictionariesNameRoute
|
DictionariesNameRoute: typeof DictionariesNameRoute
|
||||||
|
DictionariesIndexRoute: typeof DictionariesIndexRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
const DictionariesRouteChildren: DictionariesRouteChildren = {
|
const DictionariesRouteChildren: DictionariesRouteChildren = {
|
||||||
DictionariesNameRoute: DictionariesNameRoute,
|
DictionariesNameRoute: DictionariesNameRoute,
|
||||||
|
DictionariesIndexRoute: DictionariesIndexRoute,
|
||||||
}
|
}
|
||||||
|
|
||||||
const DictionariesRouteWithChildren = DictionariesRoute._addFileChildren(
|
const DictionariesRouteWithChildren = DictionariesRoute._addFileChildren(
|
||||||
|
|||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import { createFileRoute, Link } from '@tanstack/react-router'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useDictionaries } from '@/api/queries'
|
||||||
|
|
||||||
|
export const Route = createFileRoute('/dictionaries/')({
|
||||||
|
component: DictionariesPage,
|
||||||
|
})
|
||||||
|
|
||||||
|
function DictionariesPage() {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { data, isLoading, error } = useDictionaries()
|
||||||
|
|
||||||
|
if (isLoading) return <p className="text-zinc-500">{t('loading')}</p>
|
||||||
|
if (error) return <p className="text-red-600">{t('error.failed')}: {String(error)}</p>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{(data ?? []).map((d) => (
|
||||||
|
<Link
|
||||||
|
key={d.id}
|
||||||
|
to="/dictionaries/$name"
|
||||||
|
params={{ name: d.name }}
|
||||||
|
className="border border-zinc-200 rounded-lg p-4 hover:border-brand-500 hover:shadow-sm transition bg-white"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<h2 className="font-semibold text-zinc-900">{d.displayName ?? d.name}</h2>
|
||||||
|
<span className="text-xs px-2 py-0.5 rounded bg-brand-50 text-brand-700">
|
||||||
|
{d.scope}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-zinc-600 line-clamp-2 mb-2">{d.description}</p>
|
||||||
|
<div className="flex gap-2 text-xs text-zinc-400">
|
||||||
|
<span>v{d.schemaVersion}</span>
|
||||||
|
<span>·</span>
|
||||||
|
<span>{d.bundle}</span>
|
||||||
|
<span>·</span>
|
||||||
|
<span>{d.supportedLocales.join(', ')}</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,43 +1,9 @@
|
|||||||
import { createFileRoute, Link } from '@tanstack/react-router'
|
import { createFileRoute, Outlet } from '@tanstack/react-router'
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
import { useDictionaries } from '@/api/queries'
|
|
||||||
|
|
||||||
export const Route = createFileRoute('/dictionaries')({
|
export const Route = createFileRoute('/dictionaries')({
|
||||||
component: DictionariesPage,
|
component: DictionariesLayout,
|
||||||
})
|
})
|
||||||
|
|
||||||
function DictionariesPage() {
|
function DictionariesLayout() {
|
||||||
const { t } = useTranslation()
|
return <Outlet />
|
||||||
const { data, isLoading, error } = useDictionaries()
|
|
||||||
|
|
||||||
if (isLoading) return <p className="text-zinc-500">{t('loading')}</p>
|
|
||||||
if (error) return <p className="text-red-600">{t('error.failed')}: {String(error)}</p>
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{(data ?? []).map((d) => (
|
|
||||||
<Link
|
|
||||||
key={d.id}
|
|
||||||
to="/dictionaries/$name"
|
|
||||||
params={{ name: d.name }}
|
|
||||||
className="border border-zinc-200 rounded-lg p-4 hover:border-brand-500 hover:shadow-sm transition bg-white"
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-1">
|
|
||||||
<h2 className="font-semibold text-zinc-900">{d.displayName ?? d.name}</h2>
|
|
||||||
<span className="text-xs px-2 py-0.5 rounded bg-brand-50 text-brand-700">
|
|
||||||
{d.scope}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-zinc-600 line-clamp-2 mb-2">{d.description}</p>
|
|
||||||
<div className="flex gap-2 text-xs text-zinc-400">
|
|
||||||
<span>v{d.schemaVersion}</span>
|
|
||||||
<span>·</span>
|
|
||||||
<span>{d.bundle}</span>
|
|
||||||
<span>·</span>
|
|
||||||
<span>{d.supportedLocales.join(', ')}</span>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user