React Router: The GPS for Your React App

Ever felt lost in your React app? Like, you click a button and — poof! — nothing happens or you get teleported to some weird place? Welcome to the world without React Router, where navigation is basically a treasure hunt… without a map.

Enter React Router — your app’s personal GPS. It tells your app exactly where to go without reloading the entire page (because who likes waiting, right?).

---

Step 1: Install React Router

Think of this as buying the GPS device.

npm install react-router-dom@6

Step 2: Wrap Your App With BrowserRouter

This is like turning on the GPS. Without it, you’re just shouting directions into the void.

Step 3: Define Routes

Here’s where you tell your app, “Hey! When the URL says /home, take me to the Home page! When it says /about, take me there!” It’s like programming your GPS with all the cool destinations.

• Disclaimer : I have write some message in the folder “ pages” .( This is Home Page ) → You can see the Repo for the reference.

• Folder Structure :

In App.jsx

import { BrowserRouter as Router, Routes,Route, Link } from "react-router-dom"
import Navbar from "./pages/Navbar.jsx"
import Blog from "./pages/Blog.jsx"
import Home from "./pages/Home.jsx"
import Main from "./pages/Main.jsx"
import Contact from "./pages/Contact.jsx"
export default function App() {
  return (
    <div>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/blog" element={<Blog />} />
          <Route path="/main" element={<Main />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Router>
    </div>
  )
}

Step 4: Add Links, Not Portals

Forget magic portals or secret tunnels. Use <Link> components to actually move around without a full reload:

import { Link } from "react-router-dom"

export default function Navbar() {
  return (
    <nav
      style={{
        padding: "1rem 2rem",
        backgroundColor: "#1e293b",
        color: "#f8fafc", 
        display: "flex",
        gap: "1.5rem",
        alignItems: "center",
        fontFamily: "sans-serif",
        fontSize: "1rem",
      }}
    >
      <Link to="/" style={{ color: "#f8fafc", textDecoration: "none" }}>
        Home
      </Link>
      <Link to="/blog" style={{ color: "#f8fafc", textDecoration: "none" }}>
        Blog
      </Link>
      <Link to="/main" style={{ color: "#f8fafc", textDecoration: "none" }}>
        Main
      </Link>
      <Link to="/contact" style={{ color: "#f8fafc", textDecoration: "none" }}>
        Contact
      </Link>
    </nav>
  )
}

---

React Router keeps your React app from turning into a chaotic maze. So next time you get lost in your app, just remember: React Router’s got your back — no magic spells needed.

Happy routing!

---