• Português
      • Aviso de tradução por IA

      Esta documentação foi traduzida automaticamente por IA.

      Roteador

      O cliente NocoBase oferece um gerenciador de roteamento flexível que permite estender páginas e páginas de configuração de plugins usando router.add() e pluginSettingsManager.

      Rotas de Página Padrão Registradas

      NomeCaminhoComponenteDescrição
      admin/admin/*AdminLayoutPáginas de administração
      admin.page/admin/:nameAdminDynamicPagePáginas criadas dinamicamente
      admin.settings/admin/settings/*AdminSettingsLayoutPáginas de configuração de plugins

      Extensão de Páginas Comuns

      Adicione rotas de páginas comuns usando router.add(). Para componentes de página, use componentLoader para registro sob demanda, de modo que o módulo da página só seja carregado quando a rota for realmente acessada.

      Os arquivos de página devem usar export default:

      // routes/HomePage.tsx
export default function HomePage() {
  return <h1>Home</h1>;
}
      import { Link, Outlet } from 'react-router-dom';
import { Application, Plugin } from '@nocobase/client';

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: '/',
      // Importação dinâmica: o módulo da página só é carregado quando esta rota é realmente acessada
      componentLoader: () => import('./routes/HomePage'),
    });

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

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

export default app.getRootComponent();

      Suporta parâmetros dinâmicos

      this.router.add('root.user', {
  path: '/user/:id',
  element: ({ params }) => <div>User ID: {params.id}</div>
});

      Se a página for pesada ou não for necessária na renderização inicial, dê preferência a componentLoader; element continua adequado para rotas de layout ou páginas inline muito leves.

      Extensão de Páginas de Configuração de Plugins

      Register plugin settings pages via this.pluginSettingsManager. Registration has two steps — first use addMenuItem() to register the menu entry, then use addPageTabItem() to register the actual page. Settings pages appear in the NocoBase "Plugin Settings" menu.

      import { Plugin, Application } from '@nocobase/client-v2';

export class HelloPlugin extends Plugin<any, Application> {
  async load() {
    this.pluginSettingsManager.addMenuItem({
      key: 'hello',
      title: this.t('Hello Settings'),
      icon: 'ApiOutlined',
    });

    this.pluginSettingsManager.addPageTabItem({
      menuKey: 'hello',
      key: 'index',
      title: this.t('Hello Settings'),
      componentLoader: () => import('./settings/HelloSettingPage'),
    });
  }
}

      To add multiple sub-pages under a single menu entry, register multiple addPageTabItem calls with the same menuKey — tabs will appear automatically:

      import { Plugin, Application } from '@nocobase/client-v2';

class HelloPlugin extends Plugin<any, Application> {
  async load() {
    this.pluginSettingsManager.addMenuItem({
      key: 'hello',
      title: this.t('HelloWorld'),
      icon: 'ApiOutlined',
    });

    this.pluginSettingsManager.addPageTabItem({
      menuKey: 'hello',
      key: 'index',
      title: this.t('General'),
      componentLoader: () => import('./settings/GeneralPage'),
    });

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