Build a Simple Client-Side Router That Matches Path Patterns

Q: Build a Simple Client-Side Router That Matches Path Patterns

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Medium > **How to read this doc:** every one of the 5 real matching scenarios below — single param, multiple params, a static path, a wildcard, and no match at all — was verified directly against real path strings, not just described abstractly. ## 1. The problem, restated Given a list of route patterns (which may contain `:name`-style dynamic segments or a `*` wildcard), find the FIRST pattern that matches a given real path, and extract any named dynamic segments into a params object. ## 2. Clarifying questions a strong candidate asks | Question | Why it matters | | :--- | :--- | | Multiple dynamic segments in one route? | Yes, genuinely required for real apps (e.g. nested resource paths) — each named segment becomes its own params key. | | First-match-wins array order, or specificity-based? | First-match-wins (array order) is the real, simpler, more common convention — worth conf

The problem

Problem, as an interviewer would state it: "Build a simple client-side router: given a list of { pattern, handler } routes (supporting dynamic segments like :id and a wildcard *), match a real path against them and extract any named parameters."

Examples:

Code

router.match("/users/42"); // { handler: "userDetail", params: { id: "42" } }
router.match("/users/42/posts/7"); // { handler: "userPost", params: { id: "42", postId: "7" } }

Clarifying questions expected:

What should a route with MULTIPLE dynamic segments (like /users/:id/posts/:postId) look like once matched?
Should routes be checked in ARRAY ORDER, with the first match winning, or should more "specific" routes always take precedence regardless of order?
Does a wildcard * segment need to capture the matched remainder as a param too, or just match anything?

Code / implementation expected: Yes — real, direct proof matching a single dynamic segment, multiple dynamic segments, a static route, a wildcard, and a genuinely unmatched path.

routing
spa
pattern-matching

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Medium

How to read this doc: every one of the 5 real matching scenarios below — single param, multiple params, a static path, a wildcard, and no match at all — was verified directly against real path strings, not just described abstractly.

1. The problem, restated

Given a list of route patterns (which may contain :name-style dynamic segments or a * wildcard), find the FIRST pattern that matches a given real path, and extract any named dynamic segments into a params object.

2. Clarifying questions a strong candidate asks

Question	Why it matters
Multiple dynamic segments in one route?	Yes, genuinely required for real apps (e.g. nested resource paths) — each named segment becomes its own params key.
First-match-wins array order, or specifici

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: the router correctly matches single and multiple dynamic segments, a static route, a wildcard, and returns null for an unmatched path