Connecting
Learn/L7 · Routing

What is routing?

Routing maps URLs to screens — /events/123 shows the wedding with that id.

Difficulty 2/5

Mental model

/events/events/123/events/123/tasksRouterEventsList screenEventPage screenTasksTab screen

Plain English

Routing decides which screen renders for which URL. A static route is /about. A dynamic route is /events/:id where :id is a parameter. The router reads the URL and shows the matching component.

Analogy

The router is the receptionist who reads the address on the envelope and walks you to the right office.

Jessica's wedding portal

/events/123 shows wedding 123; /events/123/tasks shows its task tab.

Agentify CRM

/inbox/conversation/456 opens conversation 456.

Go deeper

URLs map to screens.

Common mistakes

  • Hardcoding URLs as strings — use the router's <Link> so it stays typed.
  • Putting everything on one route with hash anchors. Real sections deserve real URLs.

AI-agent trap

Agents will sprinkle window.location everywhere. Always use the framework's <Link> and navigate APIs.
Quick check
What does a router do?

Summary

Routes are declared in files or a config. Dynamic segments become params. Layout routes wrap child routes so shared UI (sidebar, header) isn't re-mounted.

Confidence: