React Router Basics — Navigating Your React App the Right Way 🧭

React Router is the standard routing library for React apps. It lets you build multi-page experiences using components.

🚦 Why use React Router?
• Handle different URLs without reloading the page
• Create a single-page app (SPA) with multiple views
• Dynamically render components based on route

🧱 Basic setup:

1.Install:
npm install react-router-dom

2.Setup routing:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

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

3.Navigation:
import { Link } from "react-router-dom";

Home
About

📌 Key Components:
• – Wraps your app
• – Defines all the routes
• – Matches the path and shows the component
• – For internal navigation (no page reload)

React Router makes navigation in React smooth, dynamic, and fast — a must-learn for real-world apps!