Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Client-Side Routing - Concepts
Understanding HOW client-side routing works-and why it exists-frames everything else in this module. React Router intercepts navigation, updates the URL, and renders the right components without a full page reload.
How Client-Side Routing Works
- Traditional server routing: each URL = server request = full page reload = new HTML document. Fast for simple sites, but every interaction felt slow
- SPA routing: the browser loads ONE HTML file. JavaScript intercepts URL changes and swaps components - no page reload, instant navigation
- The History API: browsers provide `history.pushState()` and `popstate` events - React Router builds on top of these to sync URL with component tree
- Hash routing (`#/about`): an older approach that stores routes after `#` - the server never sees the route, so no server config needed. Downside: ugly URLs, no SSR
- Browser routing (`/about`): modern approach using the real URL path. Requires server configuration to always serve `index.html` for unknown paths (so React Router can handle it)
- Memory routing: stores history in memory (no URL change) - useful for React Native, testing, or embedding routes inside an iframe
React Router v6 vs v5 - Key Differences
// React Router v5 - older patterns you'll see in legacy code
import { Switch, Route, Redirect } from 'react-router-dom'; // v5
<Switch>
<Route exact path="/home" component={Home} />
<Redirect from="/" to="/home" />
</Switch>
// React Router v6 - modern patterns (what we use)
import { Routes, Route, Navigate } from 'react-router-dom'; // v6
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/" element={<Navigate to="/home" replace />} />
</Routes>
// Key changes in v6:
// - <Switch> replaced by <Routes>
// - component={Home} replaced by element={<Home />}
// - Nested routes are now RELATIVE (no need to repeat parent path)
// - All routes are 'exact' by default (no more exact prop)
// - <Outlet> replaces {children} for nested route rendering
// - useNavigate() replaces useHistory()Tip
Tip
Practice ClientSide Routing Concepts in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Every website works on this model
Practice Task
Note
Practice Task - (1) Write a working example of ClientSide Routing Concepts from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with ClientSide Routing Concepts is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready react code.
Key Takeaways
- Understanding HOW client-side routing works-and why it exists-frames everything else in this module.
- Traditional server routing: each URL = server request = full page reload = new HTML document. Fast for simple sites, but every interaction felt slow
- SPA routing: the browser loads ONE HTML file. JavaScript intercepts URL changes and swaps components - no page reload, instant navigation
- The History API: browsers provide `history.pushState()` and `popstate` events - React Router builds on top of these to sync URL with component tree