URL Design: Routes, Queries, and Fragments | JavaScript Tools Blog<br>Skip to content<br>Language EN RU ES FR DE IT PT 中文 日本語 AR
BLOG INDEX<br>A URL is part navigation, part application state, and part public interface. Once users bookmark it, search engines index it, monitoring systems record it, and other applications link to it, changing that URL becomes an architectural decision rather than a cosmetic edit.
Good URL design is therefore less about making every address look pretty and more about making it predictable, stable, and unambiguous .
This guide explains the anatomy of a URL, how to choose between paths, query parameters, and fragments, how browser routing changes the picture, and how to work with URLs safely in JavaScript and TypeScript.
If you want to inspect a real address while reading, open the URL Parser. It separates the protocol, hostname, port, path segments, query entries, credentials, and fragment without uploading the URL.
The Anatomy of a URL
Consider this address:
https://shop.example.com:8443/catalog/watches?brand=acme&sort=price#results<br>It contains several components with different responsibilities:
ComponentExamplePurposeSchemehttps:Defines how the resource is accessed.Hostnameshop.example.comIdentifies the server, including any subdomain.Port8443Selects a network service when the default port is not used.Path/catalog/watchesIdentifies a resource or application route.Query string?brand=acme&sort=priceSupplies optional parameters to the request or page state.Fragment#resultsIdentifies a location or client-side state inside the document.<br>The hostname and port together form the host. The scheme, hostname, and effective port form the origin. For the example above:
host = shop.example.com:8443<br>origin = https://shop.example.com:8443<br>The distinction matters for cookies, storage, CORS, service workers, and other browser security boundaries.
Paths Should Identify Stable Resources
The path is the part most people think of as “the route.” A useful path describes what resource the application is showing:
/products<br>/products/4815<br>/products/4815/reviews<br>/accounts/alex/security<br>These paths move from a collection to an item and then to a subordinate resource. The hierarchy is visible without requiring knowledge of the application code.
Prefer predictable vocabulary
Choose a naming convention and keep it consistent:
use lowercase path segments;
separate words with hyphens;
use one convention for collections, commonly plural nouns;
avoid exposing implementation details such as .php, component names, or database table names;
avoid filler segments that add no useful hierarchy.
For example:
Avoid: /Catalog/Product_Page/modern%20watch<br>Prefer: /catalog/products/modern-watch<br>Lowercase URLs are not merely stylistic. Paths can be case-sensitive, so /Docs/API and /docs/api may be different resources. A single lowercase convention prevents accidental duplicates and hard-to-find 404 responses.
Slugs and IDs solve different problems
A readable slug helps people understand a link:
/products/modern-wristwatch<br>An immutable ID is less expressive but remains stable when the title changes:
/products/4815<br>For resources that can be renamed, a hybrid pattern is often the strongest option:
/products/4815-modern-wristwatch<br>The router extracts 4815 as the canonical identifier and treats the slug as descriptive. If the name changes, the server can redirect the old slug to the new canonical URL without losing the resource identity.
function productPath(product: { id: number; slug: string }): string {<br>return `/products/${product.id}-${product.slug}`;
function readProductId(segment: string): number | null {<br>const match = /^(\d+)(?:-|$)/.exec(segment);<br>return match ? Number(match[1]) : null;<br>Do not encode temporary UI state in the path
A path should normally remain meaningful when copied into another browser. Temporary values such as the open panel, current sort direction, or selected display density rarely identify a new resource.
Avoid: /products/sort/price/direction/ascending/view/grid<br>Prefer: /products?sort=price&direction=asc&view=grid<br>The second form keeps the stable resource in the path and moves optional state into the query string.
Routing Models: Server, Client, and Hybrid
Routing maps a URL to the code and data that produce a response. Modern applications commonly combine several routing models.
Server routing
The browser requests a URL, and the server returns the corresponding HTML response. This includes traditional server-rendered applications as well as modern SSR frameworks.
Server routing works naturally with direct navigation, status codes, redirects, caching, and crawlers because every public URL has a server response.
Client-side routing
A client router intercepts navigation and updates the visible interface without a full document reload. It also uses the History API so the address bar remains synchronized with the current view.
Client routing is not inherently bad for SEO....