What is React Router and how do you use it?

💡 Concept Name

React Router is a standard library for routing in React applications. It enables dynamic routing, allowing users to navigate between views without refreshing the page.

📘 Quick Intro

React Router allows building a single-page app (SPA) with navigation. Instead of loading new HTML pages, it dynamically changes the view based on the current URL while maintaining the application state.

🧠 Analogy / Short Story

Imagine visiting a museum where every exhibit is in one giant room, and signs guide you through different sections. You’re technically still in the same building, just looking at different displays — that’s React Router.

You never leave the building (the single-page app), but your view changes based on where the signs (routes) guide you.

🔧 Technical Explanation

BrowserRouter wraps the app to enable routing capabilities.
Routes contains multiple Route components defining the path-to-component mappings.
Link and useNavigate are used to navigate between pages programmatically or declaratively.
useParams is used to read URL parameters inside route components.
React Router doesn’t reload the browser page; it updates the virtual DOM to reflect changes.

💻 Real Code Example


import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function User() {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link> | <Link to="/user/42">User</Link>
      </nav>

      <Routes>
        <Route path="/" element={} />
        <Route path="/about" element={} />
        <Route path="/user/:id" element={} />
      </Routes>
    </BrowserRouter>
  );
}

❓ Interview Q&A

Q1: What is React Router used for?
A: It provides navigation and routing in a single-page React application, enabling multiple views without reloading the page.

Q2: What component enables routing in a React app?
A: BrowserRouter

Q3: How do you navigate between views without a full reload?
A: By using the Link component or the useNavigate hook.

Q4: What does the Route component do?
A: It maps a URL path to a React component to be rendered.

Q5: How do you access dynamic parameters from the URL?
A: By using the useParams hook.

Q6: What is the difference between Link and <a> tag?
A: Link prevents page reloads and preserves app state; <a> triggers full page reloads.

Q7: Can you nest routes in React Router?
A: Yes, nested routes allow rendering child components inside parent routes.

Q8: What hook lets you programmatically navigate in React Router?
A: useNavigate()

Q9: What are route parameters?
A: Dynamic segments of the URL (e.g., /user/:id) used to render content based on the value.

Q10: Is React Router part of React core?
A: No, it’s a separate library that integrates with React.

📝 MCQs

Q1. Which component enables routing in React apps?

RouterLink
BrowserRouter
RouteMap
HashProvider

Q2. What does the Route component do?

Defines CSS styles
Handles API requests
Maps a path to a component
Renders global layout

Q3. How do you link between pages in React Router?

a tag
navigate()
Link component
anchor helper

Q4. Which hook reads route parameters?

useRoute
useQuery
useParams
useId

Q5. How do you navigate programmatically?

useLink
useGo
useNavigate
pushRoute

Q6. What is the role of useParams?

Fetch from API
Trigger transitions
Read URL parameters
Reset form state

Q7. What happens when you use Link instead of a tag?

Full reload
No full reload
Page crash
JS error

Q8. Which statement about React Router is true?

Only used for APIs
Only for mobile
Enables SPA navigation
Not compatible with React

Q9. What does :id in /user/:id represent?

Hardcoded path
Optional segment
Dynamic URL parameter
HTML anchor

Q10. Where do you define app routes?

Outside component
App.js only
Inside Routes component
Inside Link

💡 Bonus Insight

React Router supports lazy loading of components for route-based code splitting. You can use React.lazy and Suspense with dynamic imports to improve performance.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon