logologo
Başlangıç
Kılavuz
Geliştirme
Eklentiler
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Başlangıç
Kılavuz
Geliştirme
Eklentiler
API
logologo

Hızlı Başlangıç

Eklenti Geliştirmeye Genel Bakış
İlk Eklentinizi Yazma
Proje Dizin Yapısı

Sunucu Taraflı Geliştirme

Genel Bakış
Plugin
Collections
Database İşlemleri
DataSourceManager
ResourceManager
ACL İzin Kontrolü
Middleware
Cache
Event
Context
Migration
Logger
I18n
Command
CronJobManager
Test

İstemci Taraflı Geliştirme

Genel Bakış
Plugin
Context
Router
ACL İzin Kontrolü
DataSourceManager
Resource
Request
Styles & Themes
Logger
I18n
Test

Diğer

Eklenti Yükseltme Kılavuzu
Dil Listesi
Bağımlılık Yönetimi
Derleme
Previous PageContext
Next PageACL İzin Kontrolü
TIP

Bu belge AI tarafından çevrilmiştir. Herhangi bir yanlışlık için lütfen İngilizce sürümüne bakın

#Yönlendirici (Router)

NocoBase istemcisi, router.add() ve pluginSettingsRouter.add() metotları aracılığıyla sayfaları ve eklenti ayar sayfalarını genişletmeyi destekleyen esnek bir yönlendirici yöneticisi sunar.

#Kayıtlı Varsayılan Sayfa Yönlendirmeleri

AdYolBileşenAçıklama
admin/admin/*AdminLayoutYönetim sayfaları
admin.page/admin/:nameAdminDynamicPageDinamik olarak oluşturulan sayfalar
admin.settings/admin/settings/*AdminSettingsLayoutEklenti ayar sayfaları

#Normal Sayfa Genişletme

router.add() metodu aracılığıyla normal sayfa yönlendirmeleri ekleyebilirsiniz.

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import { Application, Plugin } from '@nocobase/client';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

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();

Dinamik parametreleri destekler

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

#Eklenti Ayar Sayfası Genişletme

pluginSettingsRouter.add() metodu aracılığıyla eklenti ayar sayfaları ekleyebilirsiniz.

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', // Ayar sayfası başlığı
      icon: 'ApiOutlined', // Ayar sayfası menü simgesi
      Component: HelloSettingPage,
    });
  }
}

Çok Katmanlı Yönlendirme Örneği

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

const pluginName = 'hello';

class HelloPlugin extends Plugin {
  async load() {
    // Üst düzey yönlendirme
    this.pluginSettingsRouter.add(pluginName, {
      title: 'HelloWorld',
      icon: '',
      Component: Outlet,
    });

    // Alt yönlendirmeler
    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>,
    });
  }
}