Build a nested client-side router

Match static and dynamic routes through nested layouts while synchronizing browser history and cleanup.

HardRouting Architecture

110 min0% acceptance

Description

Implement createRouter for a nested route tree. It must rank static and dynamic matches, extract decoded parameters, compose parent layouts, retain query and hash information, navigate through History, respond to popstate, render not-found state, and remove listeners on disposal.

Requirements

The solution exports the required createRouter API from the editable module.
Static routes works deterministically for the documented normal, boundary, and repeated-use scenarios.
Dynamic params works deterministically for the documented normal, boundary, and repeated-use scenarios.
Nested layouts works deterministically for the documented normal, boundary, and repeated-use scenarios.
Query hash works deterministically for the documented normal, boundary, and repeated-use scenarios.
Navigation history works deterministically for the documented normal, boundary, and repeated-use scenarios.
Popstate works deterministically for the documented normal, boundary, and repeated-use scenarios.
Not found works deterministically for the documented normal, boundary, and repeated-use scenarios.
Subscriptions, timers, observers, and global listeners are released when they are no longer needed.

Nested dynamic route

Input

/projects/alpha/issues/42?panel=activity#comment-7

Expected output

Project and issue layouts render with params projectId alpha and issueId 42

Explanation

Search and hash information stay available without participating in pathname matching.

Constraints

Prefer a static segment over a dynamic segment at the same depth
Use pushState or replaceState for programmatic navigation
dispose must remove the popstate listener

Hints

Hint 1

Flatten route branches with their layout ancestors while retaining segment specificity.

Hint 2

Match only pathname segments, then build context from the full URL.

Hint 3

Centralize render notification so navigate and popstate use the same resolution path.

routingHistory APIarchitecture