#Маршрутизация

Клиент NocoBase предоставляет гибкий менеджер маршрутов, который поддерживает расширение обычных страниц и страниц настроек плагинов через router.add() и pluginSettingsRouter.add().

• this.router.add() — регистрирует обычные маршруты страниц
• this.pluginSettingsManager.addMenuItem() + addPageTabItem() — регистрирует страницы настроек плагинов

Регистрация маршрутов обычно выполняется в методе load() плагина. Подробнее см. Plugin.

#Зарегистрированные маршруты страниц по умолчанию

В NocoBase зарегистрированы следующие маршруты по умолчанию:

#Расширение обычных страниц

Добавьте маршруты обычных страниц через router.add().

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import { Application, Plugin } from '@nocobase/client';
const Home = () => <h1>Home</h1>;

const About = () =>

About

const Layout = () => (

  <div>
    <div>
      <Link to="/">Home</Link> | <Link to="/about">About</Link>
    </div>
    <Outlet />
  </div>
);
class MyPlugin extends Plugin {
  async load() {

this.router.add('root', { element: <Layout /> });

this.router.add('root.home', { path: '/', element: <Home /> });

    this.router.add('root.about', { path: '/about', element: <About /> });
  }

}
const app = new Application({
  router: { type: 'memory', initialEntries: ['/'] },
  plugins: [MyPlugin]
});
export default app.getRootComponent();
  );
}

Поддерживаются динамические параметры

#Вложенные маршруты

Вложенность реализуется через точечную нотацию. Родительские маршруты используют <Outlet /> для отображения содержимого дочерних маршрутов:

this.router.add('root.user', {

  path: '/user/:id',
  element: ({ params }) => <div>User ID: {params.id}</div>
});
    this.router.add('root', {
      element: (
        <div>
          <nav>Панель навигации</nav>
          <Outlet />
        </div>
      ),
    });

    // Дочерний маршрут, componentLoader для отложенной загрузки
    this.router.add('root.home', {
      path: '/', // -> /v/
      componentLoader: () => import('./pages/HomePage'),
    });

    this.router.add('root.about', {
      path: '/about', // -> /v/about
      componentLoader: () => import('./pages/AboutPage'),
    });
  }
}

#Расширение страниц настроек плагина

Добавьте страницы настроек плагина через pluginSettingsRouter.add().

import { Plugin } from '@nocobase/client';
import React from 'react';
const HelloSettingPage = () => <div>Hello Setting page</div>;
export class HelloPlugin extends Plugin {

async load() {

    this.pluginSettingsRouter.add('hello', {

      title: 'Hello', // Заголовок страницы настроек
      icon: 'ApiOutlined', // Иконка пункта меню страницы настроек
      Component: HelloSettingPage,
    });
  }

}

#componentLoader или element

• componentLoader (рекомендуется): отложенная загрузка, подходит для компонентов страниц. Файлам страниц нужен export default.
• element: передаёт JSX напрямую, подходит для компонентов макета или очень лёгких встроенных страниц.

Если страница сама по себе имеет тяжёлые зависимости, предпочтительнее использовать componentLoader.

#Страницы настроек плагинов

Регистрируйте страницы настроек плагинов через this.pluginSettingsManager. Регистрация состоит из двух шагов — сначала используйте addMenuItem() для регистрации пункта меню, затем addPageTabItem() для регистрации самой страницы. Страницы настроек появляются в меню «Настройки плагинов» NocoBase.

Пример многоуровневой маршрутизации

export class HelloPlugin extends Plugin<any, Application> {
  async load() {
    // Регистрация пункта меню
    this.pluginSettingsManager.addMenuItem({
      key: 'hello',
      title: this.t('Hello Settings'),
      icon: 'ApiOutlined', // Имя иконки Ant Design, см. https://5x.ant.design/components/icon
    });

    // Регистрация страницы (ключ 'index' сопоставляется с корневым путём меню)
    this.pluginSettingsManager.addPageTabItem({
      menuKey: 'hello',
      key: 'index',
      title: this.t('Hello Settings'),
      componentLoader: () => import('./settings/HelloSettingPage'),
    });
  }
}
```tsx

import { Outlet } from 'react-router-dom';

### Страница настроек с несколькими вкладками

const pluginName = 'hello';

```tsx
class HelloPlugin extends Plugin {

  async load() {
    // Маршрут верхнего уровня
    this.pluginSettingsRouter.add(pluginName, {
      title: 'HelloWorld',
      icon: '',
      Component: Outlet,
    });
    // Дочерние маршруты

    this.pluginSettingsRouter.add(`${pluginName}.demo1`, {
      title: 'Demo1 Page',
      Component: () => <div>Demo1 Page Content</div>,
    });
    this.pluginSettingsRouter.add(`${pluginName}.demo2`, {
      title: 'Demo2 Page',
      Component: () => <div>Demo2 Page Content</div>,

    });
  }
}
      key: 'advanced',
      title: this.t('Advanced'),
      componentLoader: () => import('./settings/AdvancedPage'),
    });
  }
}

#Параметры addMenuItem

#Параметры addPageTabItem

#Связанные ссылки

• Plugin — маршруты регистрируются в load()
• Component — как писать компоненты страниц, монтируемые маршрутами
• Пример плагина: создание страницы настроек — полный пример страницы настроек