🧭 React Router Introduction

React Router is the standard library for handling client-side routing in React. It allows you to create navigation between views and keep your UI in sync with the URL.

🔧 1. Installation

npm install react-router-dom
  

🔗 2. Basic Setup

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 Links

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

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

✨ Highlights

• ✅ Declarative routing with ``
• ✅ Nested routes supported
• ✅ URL is in sync with component state
• ✅ Works well with React Hooks and components

React Router enables seamless navigation in single-page apps without full page reloads — giving users a native app-like experience.