React Router Basics

React Router enables navigation between pages in your app.

Install

```bash npm install react-router-dom ```

Basic Setup

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

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

<Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter> ); }

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

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

URL Parameters

```javascript import { useParams } from 'react-router-dom';

<Route path="/user/:id" element={<User />} />

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

Navigate Programmatically

```javascript import { useNavigate } from 'react-router-dom';

function Login() { const navigate = useNavigate();

const handleLogin = () => { // After login navigate('/dashboard'); };

return <button onClick={handleLogin}>Login</button>; } ```

404 Page

```javascript <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotFound />} /> </Routes> ```

Remember

- Use Link for navigation - Routes define pages - useParams gets URL parameters - useNavigate for programmatic navigation

> Next: Learn Context API!