React Router Basics

# React Router Basics

1. Introduction #

2. Learning Objectives #

• Understand client-side routing vs. traditional server routing.

• Install and configure react-router-dom.

• Set up routes to display different components based on the URL.

• Use the <Link> component to navigate without refreshing the page.

3. Beginner-Friendly Explanations #

How Routing Works in an SPA #

4. Syntax Explanation #

Step 1: Installation #

npm install react-router-dom

Step 2: Setting up the Router #

```jsx id="ch17_ex1" // App.jsx import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; import NotFound from './NotFound';

function App() { return ( <BrowserRouter> {/* Everything inside Routes changes based on the URL */} <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> {/* The * path acts as a catch-all for 404 pages */} <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> ); } export default App;

### Step 3: Navigation with `<Link>`
**NEVER** use standard `<a href="...">` tags for internal links in React Router. It will trigger a full page reload, wiping out your React State! Instead, use the `<Link>` component provided by the library.

jsx id="ch17_ex2" // Example React component import { Link } from 'react-router-dom';

function Navbar() { return ( <nav> {/* Correct SPA Navigation */} <Link to="/">Home</Link> <Link to="/about">About Us</Link> {/* ❌ WRONG: Do not do this for internal routing! */} {/* <a href="/about">About Us</a> */} </nav> ); }

## 5. Output Explanations
When the user clicks the `<Link to="/about">`, the browser URL changes to `yourapp.com/about`. The `<Routes>` component detects this change, searches its list, finds the matching `<Route path="/about">`, and renders the `<About />` component inside the page instantly.

## 6. Real-World Examples
Any complex web app uses this:
- Gmail: `mail.google.com/mail/u/0/#inbox` vs `.../#sent`
- Twitter: `twitter.com/home` vs `twitter.com/notifications`
They feel instant because they are SPAs using client-side routing!

## 7. Common Mistakes
- **Using `<a>` tags:** As mentioned, this causes a full page reload. Only use `<a>` tags for external links (e.g., `<a href="https://google.com">`).
- **Forgetting the `<BrowserRouter>`:** If you try to use `<Link>` outside of a `<BrowserRouter>` wrapper, React will throw a massive error.

## 8. Best Practices
- Keep your routes organized in your main `App.jsx` or a dedicated `Router.jsx` file so other developers can easily see the architecture of your app at a glance.
- Always include a `path="*"` catch-all route to display a friendly 404 Not Found page if the user types an invalid URL.

## 9. Exercises
1. Install `react-router-dom` in a practice project.
2. Create three components: `Home`, `Dashboard`, and `Settings`.
3. Set up routes so that `/` goes to Home, `/dashboard` goes to Dashboard, and `/settings` goes to Settings.

## 10. Mini Project: Multi-Page React App
Let's build a functional navigation shell with a shared layout.

jsx id="ch17_proj1" // Example React component import React from 'react'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

// --- PAGE COMPONENTS --- const HomePage = () => <div className="p-8 text-2xl font-bold">🏠 Welcome Home</div>; const ServicesPage = () => <div className="p-8 text-2xl font-bold">🚀 Our Services</div>; const ContactPage = () => <div className="p-8 text-2xl font-bold">✉️ Contact Us</div>; const ErrorPage = () => <div className="p-8 text-2xl font-bold text-red-500">404 - Page Not Found</div>;

// --- LAYOUT COMPONENT --- const Navigation = () => ( <nav className="bg-slate-800 text-white p-4 flex gap-6 shadow-md"> <Link to="/" className="hover:text-blue-400 font-medium transition">Home</Link> <Link to="/services" className="hover:text-blue-400 font-medium transition">Services</Link> <Link to="/contact" className="hover:text-blue-400 font-medium transition">Contact</Link> </nav> );

// --- MAIN APP --- export default function App() { return ( <BrowserRouter> <div className="min-h-screen bg-slate-50 font-sans text-slate-800"> {/* Navigation sits OUTSIDE the Routes, so it is visible on EVERY page! */} <Navigation /> <main className="max-w-4xl mx-auto mt-8 bg-white rounded-xl shadow-sm border border-slate-200 min-h-[400px]"> <Routes> <Route path="/" element={<HomePage />} /> <Route path="/services" element={<ServicesPage />} /> <Route path="/contact" element={<ContactPage />} /> <Route path="*" element={<ErrorPage />} /> </Routes> </main> </div> </BrowserRouter> ); } ``

Q2: Which component acts as the foundational wrapper required for React Router to work? A) <Routes> B) <AppRouter> C) <BrowserRouter> D) <RouterWrap> *Answer: C*