📄Assignments Of Class 15
React Routing (React Router DOM)
Assignment 1: Install React Router
DOM in your React project
Task:
Install react-router-dom in your existing React app using npm or yarn.
Solution:
Open
terminal inside your project folder and run:
npm install react-router-dom
or
if you use yarn:
yarn add react-router-dom
Verify
installation by checking package.json for react-router-dom.
Assignment 2: Setup basic routing
with Home page
Task:
Create a basic React app with a Home page routed to /.
Solution:
1.
Create
a Home.js component:
function Home() {
return <h1>Home Page</h1>;
}
export default Home;
2. Setup routes in App.js:
import { BrowserRouter, Routes, Route
} from 'react-router-dom';
import Home from './Home';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home
/>} />
</Routes>
</BrowserRouter>
);
}
export default App;
Run
the app and visit http://localhost:3000/ to see "Home Page".
Assignment 3: Add About and Contact
pages with routing
Task:
Create About and Contact pages and add routes /about and /contact.
Solution:
1.
Create
About.js:
function About() {
return <h1>About Page</h1>;
}
export default About;
2.
Create
Contact.js:
function Contact() {
return <h1>Contact Page</h1>;
}
export default Contact;
3.
Update
App.js:
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
/>} />
<Route path="/about" element={<About
/>} />
<Route path="/contact" element={<Contact
/>} />
</Routes>
</BrowserRouter>
);
}
export default App;
Visit
/about and /contact to verify.
Assignment 4: Create navigation
using <Link>
Task:
Add a navigation bar with links to Home, About, and Contact using React
Router's <Link> component.
Solution:
In
App.js:
import { BrowserRouter, Routes, Route,
Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
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;
Links
navigate without full page reload.
Assignment 5: Explain difference
between <a> and <Link>
Task:
Write a short explanation and demonstrate the difference by example.
Solution:
- <a
href="/about">About</a> reloads the whole page.
- <Link
to="/about">About</Link> navigates without reload.
Example
to test:
Replace
<Link to="/about">About</Link> with <a
href="/about">About</a> and observe the page reload.
Assignment 6: Add a 404 Not Found
page for unmatched routes
Task:
Create a NotFound.js page and add a wildcard route to handle unknown URLs.
Solution:
Create
NotFound.js:
function NotFound() {
return <h1>404 - Page Not Found</h1>;
}
export default NotFound;
Update App.js:
import NotFound from './NotFound';
<Routes>
{/* other routes */}
<Route path="*" element={<NotFound />} />
</Routes>
Visit
an undefined URL like /random to see 404 message.
Assignment 7: Create a nested route
structure (Bonus)
Task:
Create a parent route /dashboard with nested routes /dashboard/profile and /dashboard/settings.
Solution:
Create
Dashboard.js:
import { Outlet, Link } from 'react-router-dom';
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<nav>
<Link to="profile">Profile</Link>
| <Link to="settings">Settings</Link>
</nav>
<Outlet /> {/* Render
nested routes here */}
</div>
);
}
export default Dashboard;
Create
Profile.js and Settings.js:
function Profile() {
return <h2>Profile Page</h2>;
}
export default Profile;
function Settings() {
return <h2>Settings Page</h2>;
}
export default Settings;
In
App.js:
import Dashboard from './Dashboard';
import Profile from './Profile';
import Settings from './Settings';
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
Navigate
to /dashboard/profile and /dashboard/settings.
Assignment 8: Programmatically
navigate using useNavigate
Task:
Create a button on the Home page that navigates to About page on click.
Solution:
In
Home.js:
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
return (
<div>
<h1>Home Page</h1>
<button onClick={() => navigate('/about')}>Go to About</button>
</div>
);
}
export default Home;
Clicking
the button navigates to /about without reload.
Assignment 9: Pass URL parameters
with routes
Task:
Create a route /user/:id and display the user ID on the page.
Solution:
Create
User.js:
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <h1>User ID: {id}</h1>;
}
export default User;
Add
route in App.js:
<Route path="/user/:id" element={<User />} />
Visit
/user/123 to see "User ID: 123".
Assignment 10: Create a Redirect
route (React Router v6 uses Navigate)
Task:
Redirect /home to / (Home page).
Solution:
In
App.js:
import { Navigate } from 'react-router-dom';
<Routes>
<Route path="/" element={<Home />} />
<Route path="/home" element={<Navigate to="/" replace
/>} />
{/* other routes */}
</Routes>
Visit
/home and it will redirect to /.
Summary
These
assignments take students step-by-step through:
- Installing React Router
- Creating pages and routes
- Navigating with <Link>
- Handling unknown routes with
404
- Nested routes and URL params
- Programmatic navigation and redirects
