89Implement a basic client-side router using the History API

Implement a small single-page-app router.

1. History adapters with the same interface, { location, push(path), replace(path), back(), listen(callback) → unlisten }, where location is { pathname, search }:

• createBrowserHistory() uses history.pushState, history.replaceState and the popstate event. Note that pushState does not fire popstate, so push and replace must notify listeners themselves.
• createMemoryHistory(initialPath = "/") keeps entries in an array. It is used for tests and server rendering. (The editor's sandboxed preview blocks pushState, so the tests use this one.)

2. createRouter(routes, history), where routes is [{ path: "/users/:id", name }] and "*" matches anything:

• router.match(pathname) returns { name, params } for the first matching route; :segments become params (URL-decoded). Trailing slashes are ignored.
• router.current() returns the match for the current location plus query (an object from the search string).
• router.navigate(path, { replace = false }) updates the history.
• router.subscribe(callback) calls callback(router.current()) after every navigation, including back/forward.
• router.handleLinkClick(event) intercepts clicks on <a href="/…"> and navigates instead of reloading. It must ignore modified clicks (Ctrl, ⌘, Shift, Alt), non-left buttons, links with target or download, external links (http…, //…, mailto:), and events already defaultPrevented.