47 lines
1.2 KiB
Plaintext
47 lines
1.2 KiB
Plaintext
|
---
|
||
|
|
title: 导航
|
||
|
|
description: 统一定义导航分组，并将其连接到桌面和移动端界面。
|
||
|
|
order: 12
|
||
|
|
toc:
|
||
|
|
- id: define-groups
|
||
|
|
title: 定义分组
|
||
|
|
- id: provide-navigation
|
||
|
|
title: 提供导航
|
||
|
|
- id: route-state
|
||
|
|
title: 路由状态
|
||
|
|
---
|
||
|
|
|
||
|
|
## 定义分组 {#define-groups}
|
||
|
|
|
||
|
|
从类型安全的 `NavigationGroup` 开始。导航项可以是直接路由，也可以是嵌套导航分支。
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import type { NavigationGroup } from "@workspace/blocks/navigation"
|
||
|
|
|
||
|
|
export const navigationGroups: NavigationGroup[] = [
|
||
|
|
{
|
||
|
|
id: "workspace",
|
||
|
|
label: "工作区",
|
||
|
|
items: [
|
||
|
|
{ id: "dashboard", label: "仪表盘", to: "/dashboard" },
|
||
|
|
{ id: "media", label: "媒体", to: "/media" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
```
|
||
|
|
|
||
|
|
## 提供导航 {#provide-navigation}
|
||
|
|
|
||
|
|
`AppLayout` 已经挂载 Provider 和响应式导航界面。自定义外壳可以直接组合它们：
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<NavigationProvider groups={navigationGroups}>
|
||
|
|
<PrimaryNavigation groups={navigationGroups} />
|
||
|
|
<MobileNavigationSheet groups={navigationGroups} />
|
||
|
|
</NavigationProvider>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 路由状态 {#route-state}
|
||
|
|
|
||
|
|
标准路由模型使用 `resolveNavigationRouteState`。使用自定义路由的应用可以提供 `GetNavigationRouteState` 实现，同时复用相同导航 UI。
|