--- title: "07 — Routing in React — URLs as State, React Router and TanStack Router" uid: routing tags: ["react-router", "react", "roadmap:react", "routing", "spa", "tanstack-router"] excerpt: "In a single-page app the URL is just another piece of state, and a router maps URL state to which components render. Links are state setters; the back button is an undo." date: 2026-08-13T03:27:45+0000 source: https://www.aveshina.my.id/en/blog/routing --- "Just navigating between pages" was my routing model, and it made routers look like page-switching utilities. The framing that straightened it out: **in a single-page application, the URL is just another piece of state, and a router is the library that maps URL state to which components render.** [1] Once I saw the URL as state, the rest followed — links are state setters, the back button is an undo, and route params are state that flows into components. ## Why a single-page app needs a router at all A traditional multi-page site navigates by full document reloads — each link fetches a fresh HTML page from the server. A React SPA loads once and then rewrites parts of the page in place, so "navigation" can't rely on the browser's default reload behavior. A client-side router fills that gap by: - intercepting link clicks and pushState calls so they update the URL **without** a full reload, - reading the current URL and deciding which route component to mount, - syncing with the browser's back/forward buttons so history still works. The payoff is the SPA's signature: instant page transitions, no white flash, persistent UI state across "pages." The cost is that I now own the URL-to-component mapping, which is what a router library manages for me. ## React Router: the default React Router is the standard library for this [1][2]. It provides a declarative way to define routes — each route maps a URL pattern to a component — and handles the link interception, history, and nested routing. The core pieces: - **** wraps the app and enables client-side routing. - ** and ** declare the URL → component mapping, including dynamic segments like :id. - **** renders an anchor that changes the URL without a reload. - **useParams** reads dynamic segments; **useNavigate** pushes programmatically. ``` } /> } /> } /> ``` Routes nest, so a /dashboard/settings route can render with an for its child routes. That nesting model is the part I underused at first — it's how shared layouts (a sidebar that stays put while the inner panel changes) are built. ## TanStack Router: the type-safe challenger TanStack Router is a newer, more ambitious router [3]. Its distinguishing trait is **full type safety end to end** — route params, search/query parameters, and links are all typed, so a typo in a path or a wrong param type is a compile error rather than a runtime 404. It also treats search params as first-class typed state, with built-in validation. ``` // a route definition infers its params and search schema export const Route = createFileRoute('/users/$userId')({ validateSearch: (search) => ({ tab: search.tab ?? 'overview' }), component: UserProfile, }); ``` The tradeoff is a steeper setup — file-based routing convention, a build step, and a stricter way of thinking. The roadmap lists it alongside React Router [3], and the way I read it: TanStack Router is the choice when type safety around navigation and search params is worth the setup cost (large apps with complex query-param state), while React Router remains the sensible default for most projects. ```figure ``` ## How I use this For most projects I default to React Router — it's battle-tested, the API is stable, and nested routes with cover the layout cases I hit. I treat the URL as state from day one: anything the user might want to share or bookmark (a filter, a selected tab, a detail view) goes into the URL as a path segment or search param, not just into local component state. That habit is what makes "deep links work" a side effect of how I build rather than a feature I bolt on. When a project's search-param state gets complex enough that I'm writing manual parsers and validators, that's the signal to evaluate TanStack Router — the type safety around params and search pays for itself at scale. ## References [1] LogRocket, "How to use routing in React JS: a comprehensive guide," blog.logrocket.com, 2023. [Online]. Available: [https://blog.logrocket.com/react-router-v6-guide/](https://blog.logrocket.com/react-router-v6-guide/) [2] React Router team, "React Router," 2024. [Online]. Available: [https://reactrouter.com/](https://reactrouter.com/) [3] TanStack, "TanStack Router documentation," 2024. [Online]. Available: [https://tanstack.com/router/latest/docs/framework/react/overview](https://tanstack.com/router/latest/docs/framework/react/overview) [4] pedrotech, "React Router v7: a crash course," dev.to, 2024. [Online]. Available: [https://dev.to/pedrotech/react-router-v7-a-crash-course-2m86](https://dev.to/pedrotech/react-router-v7-a-crash-course-2m86) ```quiz Q: In a React SPA, what is the URL? - a server-side concept with no client relevance - a piece of state, and the router maps it to which components render - an opaque string the browser owns entirely correct: 1 explain: In a SPA, the URL is state. The router reads it and mounts the matching components; links and pushState update it without a full reload. Q: React Router's nested routes plus let you… - render shared layout (sidebar, header) that stays put while the inner panel changes per child route - avoid using entirely - bypass the browser history correct: 0 explain: Nested routes map URL segments to nested components; an in the parent renders the matched child, so layout chrome persists across child-route changes. Q: What is TanStack Router's headline advantage over React Router? - it's faster at runtime by avoiding reconciliation - end-to-end type safety for routes, params, and search params - it doesn't need a build step correct: 1 explain: TanStack Router treats params and search/query state as typed, validated values, so path typos and wrong param types surface as compile errors. It also has a stricter setup. Q: Which hook reads a dynamic segment like :id from the current route in React Router? - useParams - useNavigate - useState correct: 0 explain: useParams returns an object with the dynamic segments of the matched route; useNavigate pushes programmatically. Q: "Put it in the URL, not in component state" applies best to… - values the user should be able to share, bookmark, or reach via the back button (filters, selected tabs, detail ids) - transient form input like an unsubmitted text field - a hover state correct: 0 explain: Anything shareable/bookmarkable belongs in the URL as a path segment or search param. Transient UI state (hover, draft input) belongs in component state. ```