Kendi Typesafe React Router'ınızı 500 Satırda Nasıl Yazabilirsiniz?

Yaklaşık 6 yıl önce React'ı öğrenirken, react-router edindiğim ilk üçüncü taraf kütüphanelerden biriydi. Demek istediğim, mantıklı: yönlendirme, modern Tek Sayfa Uygulamasının temel yönlerinden biridir. Bunu hafife aldım. Benim için react-router sihirli bir kutuydu, dahili olarak nasıl çalıştığı hakkında hiçbir fikrim yoktu. Bir süre sonra doğal olarak yönlendirmenin genel olarak nasıl çalıştığını anladığımda bu biraz üzücü oldu. Artık sihir yok, ha :( Ama "sihirli kara kutular" kavramını geride bıraktığım için mutluyum. Bunun gerçekten zararlı bir fikir olduğunu düşünüyorum. Teknolojinin parçasının tıpkı sizin ve benim gibi mühendisler tarafından üretildiğini anlamak bana çok ilham veriyor ve umarım sizin için de aynısını yapar. her O halde, kara kutuyu açmak ve iç işleyişini anlamak için sıfırdan kendi yazım korumalı yönlendiricimizi oluşturacağımız bu yazıda bana katılın. Bu makale, React'ı zaten bildiğinizi ve TypeScript konusunda bilgili olduğunuzu varsaymaktadır. Özellikler ve Sınırlamalar Bu makalede yönlendiricimizin hangi özelliklerinin ele alınacağını özetleyeyim. En önemli özelliğimiz yazı güvenliği olacak. Bu, rotalarınızı önceden tanımlamanız gerekeceği anlamına gelir ve TypeScript, URL yerine saçma sapan iletiler göndermediğinizi veya mevcut rotada eksik olan parametreleri almaya çalışmadığınızı kontrol edecektir. Bu bir tür jimnastik gerektirecektir, ama endişelenmeyin, size yol göstereceğim. Bunun yanı sıra, yönlendiricimiz ortalama bir yönlendiriciden beklediğiniz her şeyi destekleyecektir: URL'lere gezinme, rota eşleştirme, rota parametreleri ayrıştırma, geri/ileri gezinme ve gezinme engelleme. Şimdi sınırlamalar hakkında. Yönlendiricimiz yalnızca tarayıcıda çalışacak (üzgünüm React Native!) ve SRR'yi desteklemeyecek. SSR desteği nispeten kolay olmalı, ancak bu yazı zaten çok büyük, bu yüzden bu konuya değinmeyeceğim. Terminoloji Artık ne yapmak istediğimize dair bir vizyonumuz olduğuna göre yapı ve terminoloji hakkında konuşmamız gerekiyor. Oldukça fazla benzer kavram olacaktır, bu nedenle bunları önceden tanımlamak çok önemlidir. Kütüphanemizde iki tür rota olacaktır: ham rotalar ve ayrıştırılmış rotalar. yalnızca veya gibi görünen bir dizedir; URL'ler için bir şablondur. Ham rota, gibi iki nokta üst üste ile başlayan bölümler olan parametreler içerebilir. Ham rota /user/:id/info /login :id Bu formatın geliştiriciler için kullanımı kolaydır ancak bir program için o kadar da kolay değildir; bu rotaları daha makine dostu bir formata dönüştüreceğiz ve buna adını vereceğiz. ayrıştırılmış rota Ancak kullanıcılar rotaları açmaz, URL'leri açar. Ve URL, kaynağın tanımlayıcısıdır (bizim durumumuzda uygulamanın içindeki sayfa); gibi görünebilir. Yönlendiricimiz çoğunlukla URL'nin vereceğimiz ikinci kısmına ( ) önem verir. http://example.app/user/42/info?anonymous=1#bio path adını /user/42/info?anonymous=1#bio Yol, ( ), ( ) ve ( ) oluşur. Bu bileşenleri ayrı alanlar olarak saklayan nesneye adı verilecektir. yol adından /user/42/info arama parametrelerinden ?anonymous=1 karmadan #bio konum API'ye Üst Düzey Genel Bakış React kütüphanelerini oluştururken üç adımda ilerlemeyi seviyorum. Her şeyden önce zorunlu API. İşlevleri herhangi bir yerden çağrılabilir ve genellikle React'a hiçbir şekilde bağlı değildirler. Yönlendirici durumunda bu, , veya gibi işlevler olacaktır. navigate getLocation subscribe Daha sonra bu işlevlere dayanarak veya gibi kancalar oluşturulur. Daha sonra bu işlevler ve kancalar, yapı bileşenleri için temel olarak kullanılır. Deneyimlerime göre bu son derece iyi çalışıyor ve kolayca genişletilebilir ve çok yönlü bir kitaplık oluşturmaya olanak tanıyor. useLocation useCurrentRoute Yönlendiricinin API'si işleviyle başlar. Kullanıcının, rotaları ayrıştıran ve aynı şekle sahip bir harita döndüren tüm ham rotaların haritasını fonksiyona iletmesi gerekir. URL oluşturma veya rota eşleştirme gibi geliştiricilere yönelik tüm API'ler, ham değil ayrıştırılmış rotaları kabul eder. defineRoutes const routes = defineRoutes({ login: '/login', user: { me: '/user/me', byId: '/user/:id/info', } }); Bir sonraki adım ayrıştırılmış rotaları fonksiyonuna iletmektir. Bu yönlendiricimizin eti. Bu işlev tüm işlevleri, kancaları ve bileşenleri oluşturacaktır. Bu olağandışı görünebilir, ancak böyle bir yapı, kabul edilen argüman türlerini ve destek türlerini, tanımlanan belirli bir rota kümesine göre uyarlamamıza olanak tanıyarak, tür güvenliğini sağlar (ve DX'i geliştirir). createRouter routes const { Link, Route, useCurrentRoute, navigate, /* etc... */ } = createRouter(routes); uygulamanızın herhangi bir yerinde kullanılabilecek işlevleri (zorunlu API), bileşenlerinizin konum değişikliklerine tepki vermesini sağlayan kancaları ve üç bileşeni döndürür: , ve . Bu, kullanım durumlarının çoğunu kapsamak için yeterli olacaktır ve bu API'leri temel alarak kendi bileşenlerinizi oluşturabilirsiniz. createRouter Link Route NotFound Eğlence ve Kâr için Tür Düzeyinde Programlama Konuşmamızın yazı güvenliği kısmını ele alarak başlıyoruz. Daha önce de belirttiğim gibi typesafe router ile TypeScript sizi şu gibi bir durumla ilgili önceden uyaracaktır: Veya bunun gibi: const { userld } = useRoute(routes.user.byId); Ve eğer bunlarda neyin yanlış olduğunu hemen göremiyorsanız, kesinlikle güvenli bir yönlendiriciye ihtiyacınız var :) TypeScript'teki yazım sistemi çok güçlüdür. Demek istediğim, tür düzeyinde programlama kullanarak bir , bir ve hatta bir oluşturabilirsiniz. satranç motoru macera oyunu SQL veritabanı Değerleri değiştirdiğiniz (örneğin, iki dizeyi birleştirerek) 'değer düzeyi programlama'ya zaten aşinasınız: function concat(a, b) { return a + b; } concat('Hello, ', 'World!'); // 'Hello, World!' Ancak bunu türlerle de yapabilirsiniz! type Concat = `${A}${B}`; type X = Concat ; // ^? type X = "Hello, World!" Evet, sıradan işlevleriniz kadar güçlü değil ve farklı görünüyor. Ancak oldukça havalı ve yararlı şeyler yapmanıza olanak tanır. Ham rotalardan parametreleri çıkarmak ve geliştiricinin veya URL'yi oluşturan işleve yanlış değerler aktarmaya çalışmadığını kontrol edebilecek yeni türler oluşturmak için tür düzeyinde programlama kullanacağız. Link TS ile tür düzeyinde programlama, hızla okunamayan bir karmaşaya dönüşebilir. Neyse ki bizim için tüm bu karmaşıklığı gizleyen ve bunun gibi temiz kod yazmamıza olanak tanıyan çok sayıda proje zaten var: export type RouteParam = Pipe , Tuples.Filter >, Tuples.Map >, Tuples.ToUnion ] >; Oldukça hoş, değil mi? Bu arada, parametreleri ham rotadan ayrıştırmak için ihtiyacınız olan tüm kod budur. Bu projede, kitaplığını kullanacağız; bu, karmaşıklığı ve tür düzeyindeki kod miktarını azaltmamıza yardımcı olacaktır. hotscript Ancak bu gerekli değil: Eğer maceracı hissediyorsanız, tüm bu türleri kendiniz uygulamayı deneyebilirsiniz. Benzer özellikleri üçüncü taraf tür kitaplıkları kullanmadan uygulayan biraz ilham alabilirsiniz. Chicane yönlendiricisinden Eğer devam edecekseniz, favori başlatıcınızı ( kullanıyorum) kullanarak yeni bir React projesi oluşturmanızı ve orada kodlamaya başlamanızı öneririm. Bu şekilde yönlendiricinizi hemen test edebileceksiniz. Vite Next.js gibi çerçevelerin bu projeye müdahale edebilecek kendi yönlendirmelerini sağladığını ve bunun yerine 'vanilla' React'ı kullandığını lütfen unutmayın. Herhangi bir zorlukla karşılaşırsanız kodun tamamını bulabilirsiniz. burada Üçüncü taraf paketleri yükleyerek başlayın: tür düzeyinde yardımcı programlar için ve parametreleri URL/raw rotasından ayrıştırmak için . hotscript regexparam npm install hotscript regexparam Çeşitlerimizin ilk yapı tuğlası ham rotadır. Ham rota ile başlamalıdır; bunu TS'de nasıl kodlarsınız? Bunun gibi: / export type RawRoute = `/${string}`; Kolay değil mi? Ancak tek bir ham rotayı kabul etmez, muhtemelen iç içe geçmiş haritalamayı kabul eder, o yüzden hadi bunu kodlayalım. Şöyle bir şey yazmak isteyebilirsiniz: defineRoutes export type RawRoutesMap = { [key: string]: RawRoute | RawRoutesMap }; Bu çalışacak. Ancak bu tür sonsuz derinlikte olabilir ve TS bazı durumlarda bunu hesaplamakta zorlanacaktır. TS'nin hayatını kolaylaştırmak için izin verilen yuvalama düzeyini sınırlayacağız. Tüm uygulamalar için 20 yerleştirme seviyesi yeterli olmalıdır ve TS bunu kolayca halledebilir. Peki özyinelemeli türlerin derinliğini nasıl sınırlandırırsınız? Bu numarayı bu öğrendim; gereksinimlerimize göre değiştirilmiş bir sürüm: SO cevabından export type RecursiveMap = { [key: string]: RecursiveMap_ ; }; type RecursiveMap_ = MaxDepth extends Stack["length"] ? T : T | { [key: string]: RecursiveMap_ }; Bu bizim ilk karmaşık tipimiz, o yüzden açıklamama izin verin. Burada iki tipimiz var: bir giriş noktası olarak çalışır ve ona ek bir tuple parametresi ileterek çağırır. Bu demet, eşlemenin derinliğini izlemek için kullanılır; her çağrıda bu diziye bir öğe ekliyoruz. RecursiveMap RecursiveMap_ Ve bu demetin uzunluğu eşit olana kadar onu çağırmaya devam edeceğiz. TS'de, aynı zamanda değişmez değerler olarak da adlandırılan değerlerle kullanıldığında (örneğin, özellikle değil ), 'eşit' anlamına gelir. MaxDepth extends belirli number 42 Ve hem hem de belirli sayılar olduğundan, bu kod olarak okunabilir. Bu yapının çokça kullanıldığını göreceksiniz. MaxDepth Stack["length"] MaxDepth === Stack["length"] Neden sadece sayı eklemek yerine Tuple kullanıyorsunuz? TypeScript'te iki sayıyı eklemek o kadar kolay değil! Bunun için var ve Hotscript de sayılar ekleyebilir, ancak çok fazla kod gerektirir (görmeseniz bile), bu da aşırı kullanıldığında TS sunucunuzu ve kod düzenleyicinizi yavaşlatabilir. tam bir kütüphane Dolayısıyla benim temel kuralım, karmaşık türlerden makul ölçüde mümkün olduğunca kaçınmaktır. Bu yardımcı program türüyle eşlememizi şu kadar basit bir şekilde tanımlayabiliriz: export type RawRoutesMap = RecursiveMap ; Ham rota türleri için hepsi bu kadar. Sırada bir sonraki çözümlenmiş rotadır. Ayrıştırılmış rota, birkaç ek alan ve bir işlev içeren yalnızca bir JavaScript nesnesidir; işte nasıl göründüğü: export type ParsedRoute = { keys: RouteParam []; build(...params: PathConstructorParams ): Path ; raw: R; ambiguousness: number, pattern: RegExp; }; Bunu alanından açmaya başlayalım. Bu sadece bu rota için gerekli olan bir dizi parametredir. İşte nasıl yapıldığı: keys import { Pipe, Strings, Tuples } from "hotscript"; export type RouteParam = Pipe , Tuples.Filter >, Tuples.Map >, Tuples.ToUnion ] >; Hotscript'te bir işlevi çağırmanın iki yolu vardır: veya . Tek bir işlevi çağırmanız gerektiğinde kullanışlıdır, ancak bizim durumumuzda bunlardan 4 tane var! girişi kabul eder ve onu sağlanan bir demetin ilk işlevine yönlendirir. Call Pipe Call Pipe Döndürülen değer ikinci fonksiyona girdi olarak iletilir ve bu şekilde devam eder. Bizim durumumuzda, örneğin ham rota olsaydı, şu şekilde dönüştürülürdü: /user/:userId/posts/:postId export type Beep = Pipe , // ["user", ":userId", "posts", ":postId"] Tuples.Filter >, // [":userId", ":postId"] Tuples.Map >, // ["userId", "postId"] Tuples.ToUnion // "userId" | "postId" ] >; Görmek? Bu tür düzeyinde programlamanın büyüsüdür! Şimdi bu fonksiyonunu ele alalım. Rota parametrelerini ( ve gibi) ve isteğe bağlı arama parametrelerini/karmalarını kabul eder ve bunları bir yolda birleştirir. uygulamasına bir göz atın: build userId postId PathConstructorParams // Allows us to also accept number and // any other type which can be converted into string export type StringLike = { toString: () => string }; export type SearchAndHashPathConstructorParams = { hash?: string, search?: string | { [key: string]: string, } }; export type RouteParamsMap = { [key in RouteParam ]: Val }; export type PathConstructorParams = | [RouteParamsMap ] | [RouteParamsMap , SearchAndHashPathConstructorParams]; Fonksiyon parametreleri bir dizi olarak tanımlanır (bu daha sonra ... işlevi), burada ilk öğe ve ikincisi isteğe bağlı . değerini döndürmeye ne dersiniz? Yolunu zaten belirledik ama onu TypeScript ile nasıl tanımlarsınız? build RouteParamsMap SearchAndHashPathConstructorParams build Bu, oldukça benzer, ancak biraz daha fazla jimnastik türü gerektirir! RouteParam import { Fn } from "hotscript"; interface ReplaceParam extends Fn { return: this["arg0"] extends `:${string}` ? string : this["arg0"]; } // Leading slashes will be removed by Split , so we need to // add them back after our manipulations type Pathname = `/${Pipe , Tuples.Map , Tuples.Join ] >}${Route extends `${string}/` ? '/' : ''}`; export type Path = Pathname | `${Pathname }?${string}` | `${Pathname }#${string}`; Burada yaptığımız şey rotamızı segmentlere ayırmak, her segmentin haritasını çıkarmak ve her birinde özel fonksiyonumuz çağırmak. Geçerli segmentin bir parametre olup olmadığını kontrol eder ve onu değiştirir veya segmenti olduğu gibi döndürür. 'işlevi' biraz garip görünebilir, ancak Hotscript ile özel işlevleri bu şekilde tanımlarsınız. ReplaceParam string ReplaceParam Yolun ya sadece yoldan, ardından soru işaretinin geldiği yoldan (bu, arama parametreleri ve karma içeren URL'leri kapsar) ya da bir karma sembolünden (bu, arama parametreleri olmayan ancak karma içeren URL'leri kapsar) oluştuğunu açıkça belirtiyoruz. Ayrıca eşleşen rotayı, yani URL'den alınan parametrelerle ayrıştırılmış rotayı tanımlamak için bir türe ihtiyacımız olacak: // Interface (and not type) because we need to use `this` export interface RouteWithParams { route: ParsedRoute , params: RouteParamsMap , // TS can't properly infer type of route object with simple // check like currentRoute.route === routes.user.byId, so we // need our custom type guard matches: (route: ParsedRoute ) => this is RouteWithParams , } Son tür ; benzer, ancak ayrıştırılmış rotalar için. ParsedRoutesMap RawRoutesMap // This accepts RawRoutesMap and transforms it into // mapping of parsed routes of same shape export type ParsedRoutesMap = { [Key in keyof RM]: RM[Key] extends RawRoute ? ParsedRoute : RM[Key] extends RawRoutesMap ? ParsedRoutesMap : never; }; Ve bu notta türlerle bitiriyoruz. Birkaç tane daha olacak, ancak bunlar daha basit ve uygulamaya ilerledikçe bunları ele alacağız. Tür düzeyinde programlama daha fazlasını denemek istediğiniz bir şeyse, daha fazla bilgi edinmek ve çözmeye çalışmak için göz atabilirsiniz (onların da iyi bir vardır). tür zorluklarını Tür düzeyinde TypeScript'e kaynak listesi Rota Ayrıştırıcı Son olarak, normal değer düzeyinde kodlamaya geri döndük. uygulayarak işleri yoluna koyalım. defineRoutes export const typedKeys = (obj: T) => { return Object.keys(obj) as Array ; }; export const defineRoutes = (routesMap: T): ParsedRoutesMap => { const entries = typedKeys(routesMap).map((key) => { const entry = routesMap[key]; if (typeof entry === 'string') { return [key, parseRoute(entry)] as const; } else { // Nested map return [key, defineRoutes(entry)] as const; } }); return Object.fromEntries(entries); }; Burada karmaşık bir şey yok; işlevine daha derinlemesine bakalım. parseRoute import { parse, inject, type RouteParams as RegexRouteParams } from "regexparam"; export class InvalidRoute extends Error { }; export class InvalidRouteParams extends Error { }; const parseRoute = (route: R): ParsedRoute => { if (!route.startsWith('/')) { throw new InvalidRoute('route should start with slash (/)') } const { keys, pattern } = parse(route); const hasRequiredParams = keys.length > 0; const parsedRoute: ParsedRoute = { build(...args) { const params = ( hasRequiredParams ? args[0] : undefined ) as RouteParamsMap | undefined; const searchAndHash = ( hasRequiredParams ? args[1] : args[0] ) as SearchAndHashPathConstructorParams | undefined; if (hasRequiredParams) { if (!params) { throw new InvalidRouteParams( `Parameters for route ${route} weren't provided` ); } const missingKeys = keys.filter(k => !(k in params)); if (missingKeys.length) { throw new InvalidRouteParams( `Missing parameters for route ${route}: ${missingKeys.join(', ')}` ); } } else if (args.length > 1) { throw new InvalidRouteParams( `Route ${route} doesn't accept any parameters, received ${args[0]}` ); } let path = hasRequiredParams ? inject(route, params as RegexRouteParams ) : route; if (searchAndHash && searchAndHash.search) { if (typeof searchAndHash.search === 'string') { path += searchAndHash.search.startsWith('?') ? searchAndHash.search : '?' + searchAndHash.search; } else { path += '?' + new URLSearchParams(searchAndHash.search).toString(); } } if (searchAndHash && searchAndHash.hash) { path += searchAndHash.hash.startsWith('#') ? searchAndHash.hash : '#' + searchAndHash.hash; } return path as Path ; }, raw: route, keys: keys as RouteParam [] || [], ambiguousness: keys.length, pattern: pattern, }; return parsedRoute; }; , gözle görülür derecede daha uzun olmasına rağmen çok basittir. Rotayı ayrıştırmak ve parametreleri çıkarmak için kütüphanesini kullanırız. Rota için gereken bir dizi parametreyi elde etmemizi sağlar ve daha sonra URL'yi rotayla eşleştirmek için kullanacağımız düzenli bir ifade üretir. parseRoute regexparam Bu bilgiyi, bu nesneyi oluşturmak için kullanılan orijinal ham rota ve belirsizlik düzeyi (bu, rotadaki yalnızca bir dizi parametredir) ile birlikte saklarız. Geçmiş Paketleyici Her yönlendiricinin durumunu bir yerde saklaması gerekir. Tarayıcıdaki uygulamalarda bu aslında 4 seçeneğe indirgenir: bellek içi (kök bileşenin içindeki bir durum değişkeninde veya bileşenler ağacının dışındaki bir değişkende), Geçmiş API'si veya URL'nin karma kısmı. Kullanıcıya rotalarınızın olduğunu hiç göstermek istemiyorsanız, örneğin React'te bir oyun kodluyorsanız, bellek içi yönlendirme sizin seçiminiz olabilir. React uygulamanız daha büyük bir uygulamada yalnızca bir sayfa olduğunda rotayı karma olarak saklamak kullanışlı olabilir ve URL'yi istediğiniz gibi değiştiremezsiniz. Ancak çoğu durumda History API'yi kullanmak en iyi seçenek olacaktır. SSR ile uyumludur (diğer seçenekler değildir), kullanıcının alışık olduğu davranış kalıplarını takip eder ve en temiz görünür. Bu projemizde de onu kullanacağız. Ancak dikkate değer bir kusuru var: ek paketleyiciler olmadan çoğunlukla kullanılamaz. History AP ile etkinliğine abone olabilirsiniz; tarayıcı, URL değiştiğinde size bilgi verecektir. Ancak yalnızca değişiklik kullanıcı tarafından örneğin geri düğmesine basılarak başlatıldığında. Bir URL değişikliği koddan başlatıldıysa bunu kendiniz takip etmeniz gerekir. popstate İncelediğim yönlendiricilerin çoğu kendi sarmalayıcılarını kullanıyor: react-router ve chicane kullanım NPM paketi, TanStack yönlendiricinin var ve wouter'ın tam teşekküllü bir sarmalayıcısı yok ama yine de sahip olması gerekiyor. geçmişi kendi uygulaması maymun yama geçmişine O halde kendi sarmalayıcımızı uygulayalım. export type HistoryLocation = Pick ; export type NavigationBlocker = (isSoftNavigation: boolean) => boolean; export const createHistory = () => { const winHistory = window.history; const winLocation = window.location; const getLocation = (): HistoryLocation => { return { origin: winLocation.origin, href: winLocation.href, pathname: winLocation.pathname, search: winLocation.search, hash: winLocation.hash, }; }; /* Some magic code */ return /* something... */; }; Kullanacağımız iki tür var: ve . Birincisi, yerleşik türünün biraz sınırlı bir sürümüdür (bu, türüdür) ve ikincisi, gezinme engellemeye geldiğimizde ele alınacaktır. Bu bölümdeki diğer tüm kodlar fonksiyonunun içine girecektir. HistoryLocation NavigationBlocker Location window.location createHistory Geçmiş değişikliklerine abonelik uygulamaya başlayalım. Bu projede abone olmak için React tarzı işlevler kullanacağız: bir geri aramayı geçerek çağrısı yaparsınız ve bu, aboneliğinizi iptal etmek istediğinizde çağırmanız gereken başka bir işlevi döndürür. subscribe const subscribers: Set = new Set(); const onChange = () => { subscribers.forEach(fn => { try { fn(); } catch (err) { console.error('Error while handling location update', err); } }) }; const subscribe = (listener: VoidFunction) => { subscribers.add(listener); return () => { subscribers.delete(listener); }; }; Bir sonraki adım, programlı olarak yapılan değişiklikler de dahil olmak üzere konum değişikliklerine tepki vermektir. Nasıl yapardın? Elbette . Bu biraz kirli görünebilir (ve gerçekten de öyle), ancak ne yazık ki daha iyi seçeneklerimiz yok. maymun yamalamayla const origPushState = winHistory.pushState.bind(winHistory); const origReplaceState = winHistory.replaceState.bind(winHistory); winHistory.pushState = (data, unused, url) => { // tryNavigate will be covered later tryNavigate(() => { origPushState(data, unused, url); onChange(); }); }; winHistory.replaceState = (data, unused, url) => { tryNavigate(() => { origReplaceState(data, unused, url); onChange(); }); }; // This event is emmited when user initiates navigation // or when calling history.go, history.back and history.forward window.addEventListener('popstate', onChange); Ve geçmiş uygulamamızdaki son büyük eksik parça, navigasyon engellemedir: navigasyon isteğini durdurmanıza ve onu koşullu olarak iptal etmenize olanak tanıyan bir özellik. Gezinme engellemenin standart bir örneği, kullanıcının bir formdaki ilerlemesini kaybetmesinin önlenmesidir. let blockers: NavigationBlocker[] = []; const beforeUnloadHandler = (event: Event) => { const blocked = blockers.some(blocker => blocker(false)); if (blocked) { event.preventDefault(); // @ts-ignore For older browsers event.returnValue = ''; return ''; } }; const tryNavigate = (cb: VoidFunction) => { const blocked = blockers.some(blocker => blocker(true)); if (blocked) return; cb(); }; const addBlocker = (blocker: NavigationBlocker) => { blockers.push(blocker); if (blockers.length === 1) { addEventListener('beforeunload', beforeUnloadHandler, { capture: true }); } return () => { blockers = blockers.filter(b => b !== blocker); if (blockers.length === 0) { removeEventListener('beforeunload', beforeUnloadHandler, { capture: true }); } } }; Bizim uygulamamızda engelleyici, bu gezinmeyi engellememiz gerekip gerekmediğini belirten bir boole değeri döndüren bir işlevdir. Gezinme engellemeyle ilgili olarak iki tür gezinme vardır ve bunları farklı şekilde ele almamız gerekir. Bir tarafta, kullanıcı uygulamamızdaki bir sayfadan uygulamamızdaki başka bir sayfaya geçtiğinde yumuşak gezinme vardır. Tamamen kontrol ediyoruz ve bu nedenle onu engelleyebilir, herhangi bir özel kullanıcı arayüzünü görüntüleyebilir (kullanıcının amacını doğrulamak için) veya gezinmeyi engelledikten sonra eylemler gerçekleştirebiliriz. Öte yandan, kullanıcı başka bir siteye gittiğinde veya sekmeyi tamamen kapattığında zor bir gezinme söz konusudur. Tarayıcı, bir güvenlik sorunu oluşturacağından JavaScript'in bu gezinmenin gerçekleştirilip gerçekleştirilmeyeceğine karar vermesine izin veremez. Ancak tarayıcı, kullanıcıya ekstra bir onay iletişim kutusu göstermek isteyip istemediğimizi JavaScript'in belirtmesine izin verir. Yazılımla gezinmeyi engellerken, ek kullanıcı arayüzü (örneğin, özel onay iletişim kutusu) görüntülemek isteyebilirsiniz, ancak zor gezinme durumunda, kullanıcı bunu yalnızca sayfada kalmaya karar verdiğinde göreceğinden bu gerçekten mantıklı değildir. , bu noktada işe yaramaz ve kafa karıştırıcıdır. Geçmişimiz gezinme engelleyici işlevini çağırdığında, yumuşak gezinme gerçekleştirip gerçekleştirmediğimizi belirten bir boole değeri sağlayacaktır. Ve tüm bunlarla birlikte, sadece tarih nesnemizi döndürmemiz gerekiyor: return { subscribe, getLocation, push: winHistory.pushState, replace: winHistory.replaceState, go: (distance: number) => tryNavigate(() => winHistory.go.call(winHistory, distance)), back: () => tryNavigate(() => winHistory.back.call(winHistory)), forward: () => tryNavigate(() => winHistory.forward.call(winHistory)), addBlocker, }; 1. Adım: Zorunlu API Nihayet buradayız. Zorunlu API, diğer tüm kancalar ve bileşenler için temel oluşturacak ve geliştiricinin ihtiyaçlarını karşılayacak özel kancalar oluşturmasına olanak tanıyacak. Öncelikle rota haritamızı düz bir diziye dönüştürmemiz gerekiyor. Bu şekilde tüm rotalar üzerinden döngü yapmak çok daha kolay olacak ve bu, rota eşleştirme kısmı üzerinde çalışmaya başladığımızda işimize yarayacak. Hem tip yardımcı programına ( birleşimine dönüştürecek) hem de fonksiyona ( ayrıştırılmış rotalar dizisine dönüştürecek) ihtiyacımız var. Tiple başlayalım: ParsedRoutesMap ParsedRoute routesMap export type Values = T[keyof T]; type FlattenRouteMap = T extends ParsedRoute | RawRoute ? T : T extends ParsedRoutesMap | RawRoutesMap ? AllRoutesFromMap : never; export type AllRoutesFromMap | RawRoutesMap > = FlattenRouteMap >; Bunu iki türe ayırmak gereksiz görünebilir ancak bunun çok önemli bir nedeni var: Eğer onu kendisini çağıran tek bir tür olarak uygularsanız, TS türün aşırı derin ve muhtemelen sonsuz olduğundan şikayet edecektir. Bu yüzden, onu birbirini çağıran iki türe bölerek bu sorunu çözmeye çalışıyoruz. Değer düzeyindeki bir işlev için, iletilen değerin ayrıştırılmış bir yol olup olmadığını kontrol etmek için bir tür koruyucuya da ihtiyacımız olacak. export const isParsedRoute = ( route: any ): route is ParsedRoute => { return !!route && typeof route === 'object' && typeof route.raw === 'string' && typeof route.build === 'function'; } export const getAllRoutes = ( routesMap: ParsedRoutesMap ): ParsedRoute >[] => { type PossibleRawRoute = AllRoutesFromMap ; return typedKeys(routesMap).flatMap((k) => { const val = routesMap[k]; if (isParsedRoute (val)) { return [val] as const; } // At this point we know that val isn't ParsedRoute, so it has to be map of routes // but TS can't infer that, so we help him a little by casting val to correct type return getAllRoutes(val as ParsedRoutesMap ); }); }; Şimdi yönlendiricimizi uygulamaya başlayalım. Tarihte olduğu gibi, bu ve sonraki iki bölümde, aksi belirtilmediği sürece tüm kodlar işlevine girecektir. createRouter import { useSyncExternalStore, ComponentType, useMemo, MouseEventHandler, ComponentProps, useEffect } from 'react'; export const createRouter = (routesMap: ParsedRoutesMap ) => { // Type for any possible route from passed routesMap type RouteType = AllRoutesFromMap ; // Similar to above, but for matched routes, ie includes URL parameters type BindedRouteWithParams = RouteWithParams ; // Some of our functions will accept route filter, // which can be single parsed route, array or object type RouteFilter = | ParsedRoute | ParsedRoute [] | Record >; const history = createHistory(); const routes = getAllRoutes(routesMap); }; Öncelikle yönlendiricimize mevcut konumu bilinen rotalardan biriyle eşleştirmeyi öğretelim. Birkaç yardımcı program, işlevinin içine değil, genel kapsama veya ayrı dosyalara girebilir: createRouter export const filterOutFalsy = (obj: T[]): Exclude [] => { return obj.filter(Boolean) as Exclude []; }; export class RouteMatchingConflict extends Error { }; // This will be used later export class RouteMismatch extends Error { }; Ve bu kod fonksiyonuna giriyor. createRouter const extractRouteParams = ( pathname: string, parsedRoute: ParsedRoute ) => { const match = parsedRoute.pattern.exec(pathname); if (!match) return undefined; // Extract all route parameters from match array // and construct object from them return Object.fromEntries(parsedRoute.keys.map((key, index) => { return [key, match[index + 1]]; })) as RouteParamsMap ; }; const findMatchingRoute = ( location: HistoryLocation ): BindedRouteWithParams | undefined => { const matchingRoutes = filterOutFalsy(routes.map(route => { const params = extractRouteParams ( location.pathname, route ); if (!params) return undefined; return { route, params, matches (r: ParsedRoute ) { return route === r; }, }; })); if (matchingRoutes.length === 0) return undefined; if (matchingRoutes.length === 1) return matchingRoutes[0]; // At this point we have multiple matching routes :/ // Gotta decide which one we prefer let lowestAmbiguousnessLevel = Infinity; let lowestAmbiguousnessMatches: BindedRouteWithParams[] = []; matchingRoutes.forEach((match) => { if (match.route.ambiguousness === lowestAmbiguousnessLevel) { lowestAmbiguousnessMatches.push(match); } else if (match.route.ambiguousness m.route.raw).join(', ')}` ); } return lowestAmbiguousnessMatches[0]; }; let currentRoute = findMatchingRoute(history.getLocation()); // This function will be later returned from createRouter function const getCurrentRoute = () => currentRoute; Burada bilinen tüm rotaların üzerinden geçiyoruz ve her birini mevcut konumla eşleştirmeye çalışıyoruz. Rotanın regex'i URL ile eşleşirse rota parametrelerini URL'den alırız, aksi takdirde değerini alırız. Eşleşen her rota için bir nesnesi oluşturup onu bir diziye kaydediyoruz. Artık 0 veya 1 eşleşen rotamız varsa her şey basit. null RouteWithParams Ancak birden fazla rota mevcut konumla eşleşiyorsa hangisinin daha yüksek önceliğe sahip olduğuna karar vermemiz gerekir. Bunu çözmek için alanını kullanıyoruz. Hatırlayacağınız gibi bu rotanın bir dizi parametresi vardır ve en düşük olan rotaya öncelik verilir. ambiguousness ambiguousness Örneğin, ve iki rotamız olsaydı, konumu her iki rotayla da eşleşirdi. Ancak bu URL'nin değil, / rotasına karşılık gelmesi gerektiği oldukça açıktır. /app/dashboard /app/:section http://example.com/app/dashboard /app/:section /app/dashboard Ancak bu algoritma kurşun geçirmez değildir. Örneğin, ve rotalarının her ikisi de URL'siyle eşleşir. Ve aynı belirsizlik seviyesine sahip oldukları için yönlendiricimiz hangisine öncelik verilmesi gerektiğine karar veremeyecektir. /app/:user/settings/:section /app/dashboard/:section/:region http://example.com/app/dashboard/settings/asia Şimdi konum değişikliklerine tepki vermek ve değişkenini güncellemek için bu kodu birbirine yapıştırmamız gerekiyor; currentRoute const areRoutesEqual = ( a: RouteWithParams | undefined, b: RouteWithParams | undefined ): boolean => { if (!a && !b) return true; // Both are undefined if ((!a && b) || (a && !b)) return false; // Only one is undefined if (!a!.matches(b!.route)) return false; // Different routes // Same routes, but maybe parameters are different? const allParamsMatch = a.route.keys.every(key => a.params[key] === b!.params[key]); return allParamsMatch; }; history.subscribe(() => { const newRoute = findMatchingRoute(history.getLocation()); if (!areRoutesEqual(newRoute, currentRoute)) { currentRoute = newRoute; notifyRouteChange(); // Will be covered later } }); Artık yönlendiricimiz konum değişikliklerine tepki veriyor ve kullanıcı her zaman geçerli rotayı alabiliyor, yaşasın! Ancak rota değişikliklerine abone olma özelliği olmadan pek kullanışlı değil, o yüzden şunu da ekleyelim. Yaklaşım geçmiş sarmalayıcıda kullandığımız yaklaşıma çok benzer. const subscribers: Set = new Set(); const subscribe = (cb: VoidFunction) => { subscribers.add(cb); return () => void subscribers.delete(cb); }; const notifyRouteChange = () => { subscribers.forEach(cb => { try { cb(); } catch (err) { console.error('Error in route change subscriber', err); } }); }; Gezinmeyi gerçekleştirmek için, ve etrafında basit bir sarmalayıcı olan ve işlevlerini açığa çıkaracağız: history.push history.replace navigate navigateUnsafe // This function accepts any string path (no type-safety) const navigateUnsafe = ( path: string, { action = 'push' }: { action?: 'push' | 'replace' } = {} ) => { history[action]({}, '', path) }; // And this function accepts only paths that correspond to one of routes const navigate = ( path: Path , options: { action?: 'push' | 'replace' } = {} ) => { navigateUnsafe(path, options); }; İşte bu gerçek bir yönlendirici! Çok basit ama yine de çalışıyor. Hala uygulamamız gereken bazı kancalar ve bileşenler var, ancak buradan sonra her şey çok daha kolaylaşıyor. Adım 2: Kancalar Kancalar için geçerli konumu ve geçerli rotayı döndüren basit kancalarla başlayabiliriz. Kendi başlarına oldukça kolaydırlar, ancak bunları tek satırlık bir hale dönüştürür. Zorunlu API'mizi daha önce tasarlama şeklimiz, bu kancalara ilişkin kodu büyük ölçüde azaltmamıza olanak tanıdı. UseSyncExternalStore const useLocation = () => { return useSyncExternalStore(history.subscribe, history.getLocation); }; const useCurrentRoute = () => { return useSyncExternalStore(subscribe, getCurrentRoute); }; Yalnızca belirli bir rotada/rota kümesinde oluşturulması gereken bileşenleri kodlarken, geçerli rotayı almak için kullanabilir, kriterlere uyup uymadığını kontrol edebilir ve ardından parametrelerini kullanabilirsiniz (veya bir hata oluşturabilirsiniz). useCurrentRoute Ancak bu o kadar yaygın bir görevdir ki, kullanıcılarımızın bunun için kendi kancalarını yazmalarını sağlamak suç olacaktır - yönlendiricimiz bunu kutudan çıkar çıkmaz sağlamalıdır. function useRoute (filter: RouteFilter , strict?: true): RouteWithParams ; function useRoute (filter: RouteFilter , strict: false): RouteWithParams | undefined; function useRoute (filter: RouteFilter , strict?: boolean): RouteWithParams | undefined { const currentRoute = useCurrentRoute(); const normalizedFilter = Array.isArray(filter) ? filter : isParsedRoute(filter) ? [filter] : Object.values(filter); const isMatching = !!currentRoute && normalizedFilter.some(route => currentRoute.matches(route)); if (isMatching) return currentRoute as RouteWithParams ; else { if (strict === false) return undefined; throw new RouteMismatch( `Current route doesn't match provided filter(s)` ); } } Bu kancanın iki versiyonu vardır: katı ve rahat. Kullanıcı ikinci bir parametre olarak iletirse (veya herhangi bir şeyi iletmezse, çünkü varsayılan değerdir), mevcut rota sağlanan filtrelerden biriyle eşleşmezse bu kanca bir hata verecektir. true true Bu şekilde kancanın eşleşen bir rotaya döneceğinden veya hiç dönmeyeceğinden emin olabilirsiniz. İkinci parametre yanlışsa, bir istisna atmak yerine, geçerli rotanın filtrelerle eşleşmemesi durumunda kanca, yalnızca tanımsız değerini döndürecektir. Bu davranışı TypeScript'e açıklamak için, adı verilen bir özelliği kullanırız. Bu, farklı türlerde birden fazla işlev tanımı tanımlamamıza olanak tanır ve TypeScript, kullanıcı böyle bir işlevi çağırdığında kullanılacak olanı otomatik olarak seçecektir. işlev aşırı yükleme Yol parametrelerine ek olarak, arama parametrelerinde bazı veriler de iletilebilir; bu nedenle bunları dizeden eşlemeye ayrıştırmak için bir kanca ekleyelim. Bunun için yerleşik tarayıcı API'si kullanacağız. URLSearchParams'ı const useSearchParams = () => { const location = useLocation(); return useMemo(() => { return Object.fromEntries( (new URLSearchParams(location.search)).entries() ); }, [location.search]); }; Ve bu bölümdeki son kanca da oldukça basit olan : yalnızca geri aramayı kabul eder ve değişirse engelleyiciyi yeniden eklemek için yapılan çağrıları bir efekte sarar. useNavigationBlocker history.addBlocker const useNavigationBlocker = (cb: NavigationBlocker) => { useEffect(() => { return history.addBlocker(cb); }, [cb]); }; Şimdi bileşenlere geçelim! Adım 3: Bileşenler Yönlendirme kütüphaneleri denilince akla gelen ilk bileşen nedir? Eminim ya da en azından benzer bir şeydir. Daha önce gördüğünüz gibi, tüm ağır işleri yapan, iyi tasarlanmış zorunlu bir API nedeniyle kancalarımız çok basitti. Route Aynı şey bileşenler için de geçerlidir; kullanıcı tarafından birkaç satır kodla kolayca uygulanabilir. Ama biz ciddi bir yönlendirme kütüphanesiyiz, hadi kutuya pilleri dahil edelim :) type RouteProps = { component: ComponentType, match: RouteFilter }; const Route = ({ component: Component, match }: RouteProps) => { const matchedRoute = useRoute(match, false); if (!matchedRoute) return null; return ( ); }; Eh, bu kolaydı! bileşenini nasıl uyguladığımızı tahmin etmek ister misiniz? :) NotFound type NotFoundProps = { component: ComponentType }; const NotFound = ({ component: Component }: NotFoundProps) => { const currentRoute = useCurrentRoute(); if (currentRoute) return null; return ( ); }; Yönlendiricimiz için gereken son bileşen ise biraz daha karmaşık olan . Her zaman zorlu gezinmeyi başlatacağından ve herhangi bir tür güvenliği sağlamadığından yalnızca kullanamazsınız. O halde bu sorunları ele alalım: Link type LinkProps = Omit , 'href'> & ( // Our link accepts either type-strict href // or relaxed unsafeHref { href: Path , unsafeHref?: undefined } | { href?: undefined, unsafeHref: string } ) & { action?: 'push' | 'replace' }; const Link = ({ action = 'push', onClick, href, unsafeHref, ...props }: LinkProps) => { const hrefToUse = (href ?? unsafeHref)!; const targetsCurrentTab = props.target !== '_blank'; const localOnClick: MouseEventHandler = (event) => { if (onClick) { onClick(event); if (event.isDefaultPrevented()) { // User-defined click handler cacnelled navigation, we should exit too return; } } const inNewTab = !targetsCurrentTab || event.ctrlKey || event.shiftKey || event.metaKey || event.button === 1; if (!isExternal && !inNewTab) { event.preventDefault(); navigateUnsafe(hrefToUse, { action }); } }; const isExternal = useMemo(() => { if (!hrefToUse) return false; return new URL(hrefToUse, window.location.href).origin !== location.origin; }, [hrefToUse]); return }; işlevine benzer şekilde bileşeni, kendisine ilettiğiniz URL'yi kontrol eder ancak aynı zamanda isteğe bağlı bir dize URL'si (kaçış taraması olarak veya harici bağlantılar için) sağlamanıza da olanak tanır. davranışını geçersiz kılmak için kendi dinleyicimizi ekliyoruz ve bunun içine orijinal ( bileşenimize iletilen) çağırmamız gerekecek. navigate Link onClick onClick Link Bundan sonra, navigasyonun geliştirici tarafından iptal edilip edilmediğini kontrol ederiz (eğer öyleyse, olayı görmezden gelmeliyiz). Her şey yolundaysa, bağlantının harici olup olmadığını ve mevcut sekmede açık olması gerekip gerekmediğini kontrol ederiz. Ve ancak o zaman yerleşik sabit navigasyonu iptal edebilir ve bunun yerine kendi fonksiyonumuzu çağırabiliriz. navigateUnsafe Ve şimdi, işlevinden tüm işlevlerimizi, kancalarımızı ve bileşenlerimizi (doğrudan geçmişten yeniden aktarılan birkaç işlevle birlikte) döndürmemiz gerekiyor. createRouter return { // Directly re-exported from history go: history.go, back: history.back, forward: history.forward, addBlocker: history.addBlocker, getLocation: history.getLocation, subscribeToLocation: history.subscribe, // Imperative API subscribe, getCurrentRoute, navigate, navigateUnsafe, // Hooks useLocation, useCurrentRoute, useRoute, useSearchParams, useNavigationBlocker, // Components Link, Route, NotFound, }; Ve bununla yönlendiricimiz tamamlandı. Şimdi, az önce yaptığımız minicik yönlendiricimizi sergilemek için minicik uygulamamızı oluşturabiliriz! Bu arada, bu yönlendiricinin tam kodunu (örnek uygulamanın kodu dahil) bulabilirsiniz. burada Yapboz Parçalarını Birleştirme Peki tüm bu kodlar nasıl birbirine bağlanıyor? Oldukça düzgün bir şekilde, eğer kendim de söylersem! Bir not alma uygulaması yaptığınızı düşünün. Öncelikle rotaları tanımlayarak ve şöyle bir yönlendirici oluşturarak başlarsınız: export const routes = defineRoutes({ // Yep, this will be very minimal app root: '/', newNote: '/new', note: '/note/:noteId', }); const router = createRouter(routes); // Export functions and component you will be using export const { navigate, Link, Route, NotFound, useRoute, useNavigationBlocker } = router; Daha sonra tanımladığınız rotaları sayfa bileşenlerine bağlarsınız: function App() { return ( {/* This is how you build URL for Link */} View all notes Create new ) } içindeyken, URL'den bir not kimliği almanız gerekir, böylece bir kancası kullanırsınız: NoteDetailsPage useRoute export const NoteDetailsPage = () => { const { getNote } = useNotes(); const { params } = useRoute(routes.note); const note = getNote(params.noteId); return note ? (<> {note.title} {note.text} ) : ( Not found ); }; Yeni bir not oluştururken, kullanıcının notu kaydetmeden gezinmesi durumunda muhtemelen niyetini onaylamak istersiniz: export const NewNotePage = () => { const saveNote = () => { isSubmittingNoteRef.current = true; const note = createNote(title, text); // And this is programmatic redirect navigate(routes.note.build({ noteId: note.id })); isSubmittingNoteRef.current = false; }; const [title, setTitle] = useState(''); const [text, setText] = useState(''); const { createNote } = useNotes(); const isSubmittingNoteRef = useRef(false); useNavigationBlocker((isSoftNavigation) => { const dirty = title !== '' || text !== ''; if (!dirty || isSubmittingNoteRef.current) return false; if (isSoftNavigation) { const confirmation = confirm('Do you want to leave?'); return !confirmation; } else { return true; } }); return <> New note setTitle(e.target.value)} /> setText(e.target.value)} /> Save ; }; Olası İyileştirmeler Yönlendiricimiz gerçekten yönlendirme yapsa da TanStack yönlendirici, tepki yönlendirici veya Next.js yönlendirici gibi üretime hazır çözümlerle eşleşemez. Demek istediğim, sadece ~ 500 satırlık kod, bu fazla değil. Peki tam olarak eksik olan ne? Her şeyden önce, Sunucu Tarafı Oluşturma. Bugün tüm uygulamaların SSR'ye ihtiyacı olmayabilir, ancak tüm yönlendirme kitaplıklarının bunu desteklemesi bekleniyor. Bir dizeye sunucu tarafı oluşturma eklemek (SSR akışı değil!), geçerli konumu bellekte saklayacak (sunucuda Geçmiş API'si olmadığından) farklı bir oluşturmayı ve bunu işlevine takmayı içerecektir. history createRouter Akışlı SSR'yi uygulamanın ne kadar zor olacağının farkında değilim, ancak bunun Suspense desteğiyle güçlü bir şekilde bağlantılı olacağını varsayıyorum. İkincisi, bu yönlendirici eşzamanlı işlemeyle iyi bir şekilde entegre olmuyor. Çoğunlukla kullanımımız nedeniyle, uyumlu değildir. Yırtılmayı önlemek için bu şekilde çalışır: Kullanıcı arayüzünün bir kısmının belirli bir depolama değeriyle işlendiği, ancak kullanıcı arayüzünün geri kalanının farklı bir değerle işlendiği bir durum. useSyncExternalStore engellenmeyen geçişlerle Bu nedenle, yönlendirici Suspense ile iyi bir şekilde entegre olmuyor, çünkü askıya alınan her konum güncellemesinde bir geri dönüş gösterilecek. Bu arada, bu React'te eşzamanlılığı ele aldım ve Suspense, veri getirme ve kanca bahsediyorum. makalede bu makalede use Ancak bu olumsuzluklara rağmen, umarım bu makaleyi ilginç bulmuşsunuzdur ve bu arada kendi yönlendiricinizi kurmuşsunuzdur :)