umbraco-routing

Umbraco ルーティング

これは何ですか？

Umbraco のバックオフィスにおけるルーティングでは、パス名ベースの URL を使用してセクション、ダッシュボード、ワークスペース間を移動できます。セクションは主要な組織上の区切りとして機能し、セクションビュー、ダッシュボード、またはカスタム要素を介したエントリーポイントを持ちます。カスタムルーティングは、パラメーターとリダイレクトをサポートするルート定義を備えた umb-router-slot を使用して構築できます。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/routes
• セクション: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/sections/section
• ダッシュボード: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/dashboard
• 基盤: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation

参照例

Umbraco のソースには動作する例が含まれています：

場所: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/modal-routed/

この例では、URL ベースのナビゲーションとディープリンクのサポートを備えたルーティングされたモーダルを実演しています。複雑なルーティングパターンについてはこれを参考にしてください。

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - カスタムルートは必要ですか？ セクションナビゲーションは？ パラメーターは必要ですか？
3. コードを生成 - 最新のドキュメントに基づいてルーティングを実装します
4. 説明する - 何が作成されたか、ナビゲーションがどのように機能するかを示します

最小限の例

パス名を持つセクション

{
  "type": "section",
  "alias": "My.Section",
  "name": "My Section",
  "meta": {
    "label": "My Section",
    "pathname": "my-section"
  }
}

URL: /section/my-section

パス名を持つダッシュボード

{
  "type": "dashboard",
  "alias": "My.Dashboard",
  "name": "My Dashboard",
  "meta": {
    "label": "Welcome",
    "pathname": "welcome-dashboard"
  },
  "conditions": [
    {
      "alias": "Umb.Condition.SectionAlias",
      "match": "Umb.Section.Content"
    }
  ]
}

URL: /section/content/dashboard/welcome-dashboard

ルートを持つカスタムルーター

import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';

@customElement('my-routed-element')
export class MyRoutedElement extends UmbLitElement {
  @state()
  private _routes: UmbRoute[] = [
    {
      path: 'person/:personId',
      component: () => import('./person.element.js'),
      setup: (_component, info) => {
        console.log('personId:', info.match.params.personId);
      },
    },
    {
      path: 'people',
      component: () => import('./people.element.js'),
    },
    {
      path: '',
      redirectTo: 'people',
    },
  ];

  render() {
    return html`
      <umb-router-slot .routes=${this._routes}></umb-router-slot>
    `;
  }
}

パラメーターを持つルート

{
  path: 'edit/:id',
  component: () => import('./edit.element.js'),
  setup: (component, info) => {
    const id = info.match.params.id;
    component.itemId = id;
  },
}

リダイレクトを持つルート

{
  path: '',
  redirectTo: 'overview',
}

複数のルートの例

@state()
private _routes: UmbRoute[] = [
  {
    path: 'overview',
    component: () => import('./overview.element.js'),
  },
  {
    path: 'settings',
    component: () => import('./settings.element.js'),
  },
  {
    path: 'item/:id',
    component: () => import('./item-detail.element.js'),
    setup: (component, info) => {
      component.itemId = info.match.params.id;
    },
  },
  {
    path: '',
    redirectTo: 'overview',
  },
];

ナビゲーションリンク

render() {
  return html`
    <nav>
      <a href="/section/my-section/overview">Overview</a>
      <a href="/section/my-section/settings">Settings</a>
      <a href="/section/my-section/item/123">Item 123</a>
    </nav>
    <umb-router-slot .routes=${this._routes}></umb-router-slot>
  `;
}

パス名を持つセクションビュー

{
  "type": "sectionView",
  "alias": "My.SectionView",
  "name": "My Section View",
  "element": "/App_Plugins/MyExtension/section-view.js",
  "meta": {
    "label": "Organization",
    "pathname": "organization",
    "icon": "icon-users"
  },
  "conditions": [
    {
      "alias": "Umb.Condition.SectionAlias",
      "match": "My.Section"
    }
  ]
}

URL: /section/my-section/organization

ネストされたルート

// Parent element
@state()
private _routes: UmbRoute[] = [
  {
    path: 'admin',
    component: () => import('./admin-layout.element.js'),
  },
  {
    path: 'users',
    component: () => import('./users-layout.element.js'),
  },
];

// Admin layout element can have its own nested routes
@state()
private _adminRoutes: UmbRoute[] = [
  {
    path: 'dashboard',
    component: () => import('./admin-dashboard.element.js'),
  },
  {
    path: 'settings',
    component: () => import('./admin-settings.element.js'),
  },
];

ルートセットアップ関数

{
  path: 'edit/:documentId',
  component: () => import('./document-editor.element.js'),
  setup: (component, info) => {
    // Access route parameters
    const documentId = info.match.params.documentId;

    // Pass to component
    component.documentId = documentId;

    // Can also access query params, etc.
    console.log('Route info:', info);
  },
}

主要な概念

pathname: セクション/ダッシュボード/ビュー用の URL セグメント

umb-router-slot: 一致したルートをレンダリングするコンポーネント

UmbRoute: パス、コンポーネント、setup を持つルート定義

ルートの順序: 最初に一致したものが優先されます - 順序が重要です！

パラメーター: パスで :paramName を使用します（例: item/:id）

リダイレクト: redirectTo を使用して別のパスにリダイレクトします

setup 関数: ルートが一致したときに呼び出され、コンポーネントとルート情報を受け取ります

URL 構造:

• セクション: /section/my-section
• ダッシュボード: /section/content/dashboard/welcome
• セクションビュー: /section/my-section/organization
• カスタム: /section/my-section/people/person/123

エントリーポイント:

• セクションビュー（タブ/アイコン付き）
• ダッシュボード（タブ/アイコン付き）
• ワークスペース（エンティティ編集）
• カスタム要素（完全な制御）

以上です！ 常に最新のドキュメントを取得し、例を最小限に保ち、完全に動作するコードを生成してください。