✅ 1. What is React Router?

React Router is a standard library for routing in React. It enables navigation between views of different components, changing the browser URL, and keeping UI in sync with the URL.

✅ 2. Installation

bash
CopyEdit
npm install react-router-dom

Use react-router-dom for web apps.

✅ 3. Basic Setup (React Router v6+)

tsx
CopyEdit
// index.tsx or main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

✅ 4. Routes Configuration

tsx
CopyEdit
// App.tsx
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

✅ 5. Navigating Pages

tsx
CopyEdit
// Inside any component
import { Link } from 'react-router-dom';

<Link to="/">Home</Link>
<Link to="/about">About</Link>

For programmatic navigation:

tsx
CopyEdit
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate('/about');

✅ 6. URL Parameters (/user/:id)

tsx
CopyEdit
<Route path="/user/:id" element={<UserProfile />} />