Yönlendirme

Yönlendirmeye Giriş

Router'ın kurulması, bir adresin iç içe layout'lara ve sayfalara dönüşmesi, useRouter seçenekleri, gezinme modları, bulunamayan rota ve hata sayfası.

MotifJS yönlendirmesi (routing) çekirdekle birlikte gelir. Rotaları bir yapılandırma dizisiyle tanımlar, RouterView ile ekrana yerleştirir ve Application üzerinden programatik olarak gezersiniz.

Bu kategorideki örnekler başlangıç şablonunun not uygulamasından alınmıştır (MainLayout, NotesLayout, NotePage). Note, Folder ve NotesService Bileşenler sayfasındaki src/services/notes.ts dosyasındakilerdir.

Bir adres ekrana nasıl gelir

Rotalar tek bir RouteItem[] tablosunda tanımlanır. childs ile iç içe yazılan rotalar bir zincir oluşturur: üst rota layout'tur, çocuğun bileşeni onun RouterView'ına yerleşir. Aynı bileşen birden çok rotaya verilebilir; rotalar arasındaki fark meta gibi alanlarla taşınır. Örnek tablo:

import type { RouteItem } from "@motifx/core";
import MainLayout from "./layouts/MainLayout";
import NotesLayout from "./layouts/NotesLayout";
import NoteEmptyPage from "./pages/NoteEmptyPage";
import NotePage from "./pages/NotePage";
import type { Folder } from "./services/notes";

const folder = (name: Folder): RouteItem => ({
  path: `/${name}`,
  control: NotesLayout,
  meta: { folder: name },
  childs: [
    { path: "/", control: NoteEmptyPage },
    { path: "/{id}", control: NotePage },
  ],
});

export const routes: RouteItem[] = [
  {
    path: "/",
    control: MainLayout,
    childs: [
      { path: "/", redirect: "/notes" },
      folder("notes"),
      folder("pinned"),
      folder("archive"),
      { path: "/settings", control: () => import("./pages/SettingsPage") },
    ],
  },
];

import MainLayout from "./layouts/MainLayout";
import NotesLayout from "./layouts/NotesLayout";
import NoteEmptyPage from "./pages/NoteEmptyPage";
import NotePage from "./pages/NotePage";

const folder = (name) => ({
  path: `/${name}`,
  control: NotesLayout,
  meta: { folder: name },
  childs: [
    { path: "/", control: NoteEmptyPage },
    { path: "/{id}", control: NotePage },
  ],
});

export const routes = [
  {
    path: "/",
    control: MainLayout,
    childs: [
      { path: "/", redirect: "/notes" },
      folder("notes"),
      folder("pinned"),
      folder("archive"),
      { path: "/settings", control: () => import("./pages/SettingsPage") },
    ],
  },
];

Bir adres tablodaki bir zincire eşleşir; zincirin her halkası bir öncekinin RouterView'ına yerleşir. Gezinmede yalnızca değişen halkalar yeniden kurulur: aynı rotada kalan layout yerinde kalır; başka bir rotanın bileşeni, aynı sınıf olsa da, yeniden kurulur. Örnekte /notes/3 adresi / (MainLayout) → /notes (NotesLayout) → /{id} (NotePage) zincirine eşleşir; /notes/5'e geçişte yalnız NotePage, /pinned'a geçişte NotesLayout da yeniden kurulur. / adresi varsayılan çocuktaki redirect ile /notes'a gider.

Rota tablosunun bütün alanları Rota Tablosu, RouterView'ın yerleşimi RouterView sayfasındadır.

Router'ı etkinleştirme

Rota tablosu uygulama kurulurken useRouter ile verilir:

import { Application } from "@motifx/core";
import NotFoundPage from "./pages/NotFoundPage";
import { routes } from "./routes";

export function createApp(): Application {
  const builder = Application.CreateBuilder();
  const app = builder.build();
  app.useDevelopment(import.meta.env.DEV);
  app.useRouter({
    routes,
    mode: "history",
    fallbacks: { notFound: NotFoundPage },
  });
  return app;
}

import { Application } from "@motifx/core";
import NotFoundPage from "./pages/NotFoundPage";
import { routes } from "./routes";

export function createApp() {
  const builder = Application.CreateBuilder();
  const app = builder.build();
  app.useDevelopment(import.meta.env.DEV);
  app.useRouter({
    routes,
    mode: "history",
    fallbacks: { notFound: NotFoundPage },
  });
  return app;
}

run'a kök bileşen verilmezse köke bir RouterView yerleşir ve zincirin ilk halkası oraya gelir; örnekte uygulama createApp().run("#app") ile başlar. useDevelopment(true), useRouter'dan önce çağrıldığında rota tablosu geliştirme kipinde denetlenir; denetimin uyardığı durumlar Rota Tablosu sayfasında anlatılır.

mode değerleri:

'history' modunda rota tablosu adresin yolunun tamamıyla eşleşir; <base href> ve Vite'ın base ayarı hesaba katılmaz. Uygulama bir alt yolda yayımlanıyorsa (https://site.com/app/) adres /app/notes olur ve /notes rotası eşleşmez, sayfa bulunamadı olarak açılır. Böyle bir yayında rotalar alt yolla birlikte yazılır (/app/notes) ya da 'hash' modu kullanılır; 'hash' modunda yol #'ten sonra başladığı için /app/#/notes adresi /notes rotasıyla eşleşir.

Bulunamayan rota ve hata sayfası

Hiçbir rota eşleşmezse fallbacks.notFound bileşeni, URL'nin öneki olarak eşleşen en derin layout'un outlet'ine basılır (kabuk kaybolmaz), adres çubuğu istenen URL'ye güncellenir ve app.router.ok false olur (app.router.params.path istenen yolu taşır). Fallback tanımlı değilse gömülü bir "404 - Not Found" paneli gösterilir. fallbacks.error ise rota bileşeni yüklenemediğinde/hata fırlattığında aynı şekilde kullanılır (params.error); tanımlı değilse gömülü bir hata paneli çıkar.

Örnekte /notes/3/x için öneki eşleşen en derin layout NotesLayout'tur, NotFoundPage onun çıktısına basılır; /olmayan için tek eşleşen layout MainLayout'tur.

Router hata kodları

Router'ın ürettiği kodlar: raporlar console.error'a ve errorHandler dinleyicilerine gider, uyarılar yalnız geliştirme kipinde yazılır, fırlatılanlar çağıran satıra döner (bkz. Hata Yönetimi). Bütün kodlar Hata ve Uyarı Kodları sayfasındadır:

Rota tablosunun geliştirme kipindeki denetim uyarıları (MJX310–MJX316, MJX319, MJX320) Rota Tablosu sayfasındadır.

Sonraki adım

Rotaların nasıl tanımlandığını öğrenmek için Rota Tablosu bölümüne geçin.