💻Lecture Notes Of Class 15
React Routing (React Router DOM)
Objective:
By
the end of this class, students will be able to create Single Page Application
(SPA) navigation using React Router DOM. They will understand how to install
and use react-router-dom, create routes, use <Link> for navigation, and
set up basic pages.
Lecture Outline:
1. Introduction to Routing in React
(10 minutes)
- What is Routing?
- Why do we need routing in a
React app?
- Difference between Multi-Page
Applications (MPA) and Single Page Applications (SPA).
- How React Router helps in SPA
navigation without page reload.
2. Installing React Router DOM (5
minutes)
- How to install using npm or
yarn.
- Overview of the package.
3. Basic Setup of React Router (15
minutes)
- Understanding BrowserRouter,
Routes, and Route components.
- Creating routes for multiple
pages.
4. Navigating with <Link>
component (10 minutes)
- How to create navigation links
without reloading the page.
- Differences between <a>
and <Link>.
5. Activity: Create pages for Home,
About, Contact (15 minutes)
- Hands-on coding for creating
pages.
- Adding routes and navigation
links.
6. Homework Explanation (5 minutes)
- Adding a 404 Not Found route to
handle unmatched URLs.
Detailed Lecture Notes:
1. Introduction to Routing in React
Routing means moving between different
pages or views in a web app.
- Traditional websites reload the
whole page when you click links — this is slow.
- In React, we build SPAs where
the page loads once, and navigation happens by changing views inside the app.
- React Router DOM helps us manage these views
and URL changes without page reloads.
Example:
Clicking "About" changes the content but the page does NOT reload.
2. Installing React Router DOM
Open your terminal in your React project folder and run:
npm install react-router-dom
or
yarn add react-router-dom
This
package gives us all tools to create routing.
3. Basic Setup of React Router
React
Router provides components:
- <BrowserRouter> — Wraps
your app and enables routing.
- <Routes> — Contains all
route definitions.
- <Route> — Defines a path
and the component to render.
Example:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home
/>} /> {/* Home page */}
<Route path="/about" element={<About
/>} /> {/* About page */}
<Route path="/contact" element={<Contact
/>} /> {/* Contact page */}
</Routes>
</BrowserRouter>
);
}
export default App;
Explanation:
- path specifies the URL path.
- element specifies the React
component to show.
4. Navigating with <Link>
Using
regular HTML <a href=""> tags causes full page reloads.
React
Router’s <Link> component allows navigation inside the app without
reload.
Example:
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link> |
<Link to="/about">About</Link> |
<Link to="/contact">Contact</Link>
</nav>
);
}
- to is used instead of href.
- Clicking a <Link> updates
the URL and renders the matching component without reloading.
5. Activity: Create pages for Home,
About, Contact
Step
1: Create Components
Create
three new files in src folder:
Home.js
function Home() {
return <h1>Welcome to the Home Page</h1>;
}
export default Home;
About.js
function About() {
return <h1>About Us</h1>;
}
export default About;
Contact.js
function Contact() {
return <h1>Contact Us</h1>;
}
export default Contact;
Step
2: Setup Routing and Navbar
App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
|
<Link to="/about">About</Link>
|
<Link to="/contact">Contact</Link>
</nav>
<Routes>
<Route path="/" element={<Home
/>} />
<Route path="/about" element={<About
/>} />
<Route path="/contact" element={<Contact
/>} />
</Routes>
</BrowserRouter>
);
}
export default App;
6. Homework: Add a 404 Not Found
Route
To handle unknown URLs, add a catch-all route:
<Route path="*"
element={<NotFound />} />
Create
NotFound.js:
function NotFound() {
return <h1>404 - Page Not Found</h1>;
}
export default NotFound;
Summary
- React Router DOM allows SPA
navigation.
- Install it with npm or yarn.
- Use <BrowserRouter>, <Routes>,
and <Route> to define routes.
- Use <Link> for navigation
to prevent page reload.
- Create separate components for
each page.
- Bonus: Add a 404 page for
unmatched routes.
Suggested Questions for Students
- What happens if you use <a>
instead of <Link> in React Router?
- Why do we wrap the app with <BrowserRouter>?
