Different URL, Different Screen, No Full Page Reload
Routing Intro
Routing in a React SPA means updating the URL and showing different components — without reloading the page.
What you'll learn
- Understand what client-side routing is
- Recognize the alternatives (React Router, TanStack Router, Next.js)
React itself has no routing built in. Your app is one
<App /> until you decide to route — show different content
based on the URL.
What “Client-Side Routing” Is
Three things, working together:
- The user clicks a link → JS intercepts the click
- Update
window.historyso the URL bar changes - Render the component for that URL
No full page reload. The user sees a SPA-style transition; the URL still works as a normal URL (bookmark, share, back button).
The Library Question
The two big choices today:
| Library | When |
|---|---|
| React Router | Most React apps. Mature, big ecosystem |
| TanStack Router | Type-first apps, complex data loading |
| Next.js / Remix | Full frameworks — routing is built in |
For a vanilla React app, React Router is the default. The next lesson walks through a small example.
What Routing Is Not
- It’s not built into React. Without a library, you can build URLs
yourself with
window.locationanduseState— but it’s not worth it for anything beyond toy apps. - It’s not the same as Next.js’s “file-based routing”. That’s routing handled by the framework, not React.
Up Next
A quick React Router tour.
React Router →