🔌 Setting Up react-router-dom

react-router-dom enables client-side routing in your React application. It lets you navigate between components without reloading the entire page.

📦 1. Installation

Run this command in your project folder:

npm install react-router-dom
  

⚙️ 2. Basic Setup in App.jsx

Wrap your app with BrowserRouter and define your routes:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

export default App;
  

🔗 3. Navigation with Links

Use <Link> to navigate without page reload:

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}
  

You’re now ready to use routing in your React app! 🎉