Yönlendirme

PreffX'te yönlendirme, kök düzeyindeki bir url sinyali ile yönetilir. Gezinme işlemi bu sinyali günceller ve oluşturulan ağaç yapısı buna otomatik olarak tepki verir. Kütüphane, gezinme kaynağına bağımlı değildir; tarayıcının Navigation API'si mevcut olduğunda onu kullanır, SSR (sunucu tarafında işleme) veya "headless" (arayüzsüz) ortamlarda ise sinyallerle yönetilen bağımsız bir gezinme mekanizmasına geçer.

URL'yi Okuma

url yardımcı öğesi, salt okunur bir URL sinyalidir:

import type { PC } from 'preffx';

export const Path: PC = (_props, { url }) => {
    return <p>You are at: {url.value.pathname}</p>;
};

Gezinmeyi tetikleme

Başka bir URL'ye geçmek için navigate kullanın:

import type { PC } from 'preffx';

export const Go: PC = (_props, { navigate }) => {
    return <button onClick={() => navigate('/about')}>About</button>;
};

routes ile Bildirimsel Rotalar

routes yardımcı programı, yol kalıbı → bileşen haritasını alır ve ilk eşleşen rota için işlenmiş içeriği içeren reaktif bir sinyal döndürür. Eşleştirme, ilk eşleşenin kazandığı şekildedir: kalıplar nesne anahtar sırasına göre kontrol edilir.

import type { PC } from 'preffx';

export const App: PC = (_props, { routes }) => {
    const content = routes({
        '/': () => <div>Home</div>,
        '/:lang?/user/:id': (_, { routeParams }) => (
            <div>User #{routeParams.id} ({routeParams.lang || 'en'})</div>
        ),
        '*': () => <div>Not found</div>
    });

    return (
        <div>
            <a href="/">Home</a>
            <a href="/user/42">User page</a>
            <a href="/ru/user/42">User page (ru)</a>
            <a href="/unknown">Unknown page</a>
            {content}
        </div>
    );
};

Rota desenleri

Desen	Açıklama	Eşleşme örneği
/users	Statik segment	/users
/user/:id	Zorunlu parametre (:id)	/user/42 → { id: '42' }
/:lang?/home	İsteğe bağlı parametre (?); yokluğunda boş değer	/home → { lang: '' }
/files/*	"Splat" (joker) — geri kalan kısmı yakalar (* sonrası)	/files/a/b → { '*': 'a/b' }
*	"Catch-all" (her şeyi yakalar) — her yolla eşleşir	/anything

Notlar:

• Rota parametreleri otomatik olarak URI kod çözme işleminden (URI-decoded) geçirilir.
• Bir desen, yol adının (pathname) bir ön ekiyle eşleşir: /users deseni /users/42 yoluyla da eşleşir. Tam eşleşme gerektiğinde, "catch-all" (her şeyi yakalayan) bir desen veya daha spesifik bir desen kullanın.
• * karakteri yalnızca son segmentte joker (wildcard) işlevi görür; diğer konumlarda ise düz metin (literal) olarak değerlendirilir.
• Eşleşen rota parametrelerine routeParams üzerinden erişilebilir.
• İç içe yerleşimlerde (nested layout), göreceli desenler üst rotanın eşleşen yolu temel alınarak çözümlenir.

İç içe geçmiş rotalar

Bir üst bileşende routes() fonksiyonunu çağırın; eşleşen alt bileşen, döndürülen sinyal içine işlenir (render edilir). Eşleşen kalıptan elde edilen rota parametreleri routeParams aracılığıyla açığa çıkarılır ve ayrıca bağlam (context) yoluyla alt bileşenlerin erişimine sunulur.

Utils özeti

Seçenek	Tür	Açıklama
defaultURL	string | URL	Başlangıç ​​URL'si (SSR için istek URL'sini iletin)
url	ReadonlySignal<URL>	Mevcut URL (reaktif)
navigate	(url, options?)	Bir URL'ye git
routes	(paths) => signal	İlk eşleşen rotayı işleme (render)
routeParams	Record<string, string>	Şu an eşleşen rotanın parametreleri