What is React Router?

React Router is a library that allows your app to:

• Have multiple “pages” (routes) without refreshing the browser
• Navigate between components using URLs like /home, /about, /profile/123
• Control which component shows based on the URL

✅ Step-by-Step: Setting Up React Router (v6+)

1️⃣ Install React Router

Run this in your terminal:

npm install react-router-dom

2️⃣ Basic File Structure Example

src/
├── App.js
├── Home.js
├── About.js
└── Contact.js

3️⃣ Create Components

Home.jsx

import React from "react";

function Home() {
    return <h2>Home Page</h2>
}

export default Home;

About.jsx

import React from "react";

function About() {
    return <h2>About Page</h2>
}

export default About;

Contact.jsx

import React from "react";

function Contact() {
    return <h2>Contact PAge</h2>
}

export default Contact

4️⃣ Set Up Routing in App.jsx

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    <Router>
      <nav style={{ marginBottom: "20px" }}>
        <Link to="/">Home</Link> |{" "}
        <Link to="/about">About</Link> |{" "}
        <Link to="/contact">Contact</Link>
      </nav>

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

export default App;

🧪 Test It Out

Run your app and try:

• http://localhost:5173/
• http://localhost:5173/about
• http://localhost:5173/contact

Clicking links doesn’t reload the page — that’s the magic of React Router ✨

Keep Learning 🙂