# 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.

```bash
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 :**
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748249484031/0cc0dc7b-0b47-4440-bedd-21a2febc335d.png align="center")

In `App.jsx`

```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:

```jsx
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!

---