5 questions foundWhat is client side routing in a React app, and how does React Router help with it?
Beginner Client side routing lets a user navigate between different pages of a single page app without the browser actually reloading the page from the server every single time. React Router is the most popular library for this, letting you define which component shows for each specific web address, called a route.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
Real-world example A company website switches between its home page and about page instantly, without any visible page reload, thanks to React Router handling navigation entirely on the client side.
Common follow-ups: What happens to the browser's back and forward buttons with client side routing?;How is client side routing different from a traditional multi page website?
Server-Side Rendering (SSR) & Next.js;Components & JSX
How do you create a clickable link to navigate between pages using React Router?
Beginner Instead of a regular HTML anchor tag, which would cause a full page reload, React Router provides a Link component that changes the current page smoothly using client side routing, while still looking and working like a normal link to the user.
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}
Real-world example A website's navigation menu uses Link components instead of regular anchor tags, so clicking between pages feels instant and smooth instead of triggering a full page reload every time.
Common follow-ups: What happens if you accidentally use a regular anchor tag instead of Link for internal navigation?;How does the NavLink component differ from a regular Link?
Components & JSX;Performance (memo/useMemo)
How do you read a dynamic value from the URL, such as a product id, using React Router?
Intermediate You define a route with a colon before a name, like colon id, and React Router's useParams hook then gives you access to that specific value from the current web address inside your component.
<Route path="/products/:id" element={<ProductDetail />} />
function ProductDetail() {
const { id } = useParams();
return <p>Showing details for product {id}</p>;
}
Real-world example An online store shows the correct product details page for whichever product id appears in the web address, such as slash products slash 42, using useParams to read that value directly.
Common follow-ups: What happens if a user visits a product page with an id that does not actually exist?;Can a single route have more than one dynamic parameter?
Data Fetching (React Query & SWR);Components & JSX
How would you protect certain routes so only logged in users can access them?
Advanced You create a wrapper component that checks whether the user is logged in, and either renders the protected page or redirects them to a login page instead, using the Navigate component from React Router. This wrapper is then placed around any route that needs protection.
function ProtectedRoute({ children }) {
const { user } = useAuth();
if (!user) return <Navigate to="/login" />;
return children;
}
<Route path="/dashboard" element={
<ProtectedRoute><Dashboard /></ProtectedRoute>
} />
Real-world example A banking app automatically redirects any visitor who is not logged in away from the account dashboard page and back to the login screen, using a shared ProtectedRoute wrapper around every sensitive page.
Common follow-ups: How would you also remember the page a user was trying to visit, so they land there after logging in?;How would you protect a route based on a user's role instead of just whether they are logged in?
Authentication;Custom Hooks
How would you programmatically navigate a user to a different page after they complete an action, such as submitting a form?
Intermediate React Router provides a useNavigate hook that gives you a function to change the current page directly from your code, instead of relying on the user clicking a link, which is useful right after a successful form submission or login.
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
function handleLogin() {
loginUser().then(() => navigate('/dashboard'));
}
return <button onClick={handleLogin}>Log In</button>;
}
Real-world example A checkout page automatically redirects a customer to an order confirmation page the moment their payment is successfully processed, using useNavigate instead of requiring the customer to click a link themselves.
Common follow-ups: How would you navigate back to the previous page a user was on?;What is the difference between using useNavigate and simply changing the browser's address directly?
Forms: Controlled & Uncontrolled Components;Server Actions & Data Mutations