Skip to main content

Routing ↔ (process) to respond & serve content to Client Navigation Events/requests

aka Route, Routes, Re-route

querystring

Static Resource​

Content that doesn't change; ideal for Pre-render

client request​

request specified by URL & HTTP Method

IA​

Information Architecture

CRUD​

4 fundamental App needs to operate on persistent storage

Routing Instance Method signature

app.METHOD(_PATH, _HANDLER)

Catch All Route​

404 handler page to catch/redirect unknown Routes

Redirect​

(process) to Re-route to another page

Parallel Route​

(feat) Next Router to show Route for 2+ Pages in same view, for independent nav

Intercept Route​

(feat) to intercept Route & show in context of another Route

Conditional Route​

(feat) to render Route vs condition

Hard Nav​

(feat) on nav, invalid HTTP Cache & Reqs Backend to re-render change in segment

Soft Nav​

(feat) on nav, to reuse HTTP Cache (if avail) & send no request

Shallow Route​

(feat) to change URL w/o repeat Data Fetch for current Page

Null Route

References​

  1. react-router-dom ↔ React Lib for Routing Primitives to Client Routing & Server Side Render in Declarative Composable way

  2. Client Routing ↔ SPA Routing to nav within Web App w/o page refresh, via Thick Client JS

  3. Express ↔ Node.js Node Framework to handle complex Routing, Middleware, Server Side Render

  4. Req ↔ Request Object, 1st arg to pass Routing Handler

  5. Breadcrumb ↔ UI to show link trail to current page in Routing hierachy

  6. docusaurus ↔ React Framework SSG CMS for API docs as SPA with built-in Routing + MDX support

  7. File System Router ↔ to define Routing by filepath struct; to map FC src path to route

  8. Protected Route ↔ Route with access restrict to Auth state

  9. Next Router ↔ built-in router for Next.js with specific opinionated Routing patterns

  10. Conditional Route ↔ (feat) to render Route vs condition

  11. Intercept Route ↔ (feat) to intercept Route & show in context of another Route

  12. Parallel Route ↔ (feat) Next Router to show Route for 2+ Pages in same view, for independent nav

  13. Catch All Route ↔ 404 handler page to catch/redirect unknown Routes

  14. Redirect ↔ (process) to Re-route to another page

  15. Dynamic Route ↔ Route with dynamic content vs URL Parameter ie [id].tsx

  16. PRPL ↔ Design Pattern to Prefetch critical Blocking assets Render init Routes ASAP Pre-Cache assets Lazy Load non-essential assets