4.7🚦 React Router – Navigating Between Pages in React 🧭

Hey buddy! 👋
Imagine you’re building a website, and you want users to move between pages like Home, About, and Contact — without the page reloading every time.

That’s where React Router comes in! 🚀

React Router is like Google Maps for your app — it helps your users navigate without getting lost! 🗺️

Let’s break it all down in simple steps (like I’m teaching you, my favorite curious cousin 😄).

🧠 What is React Router?

React Router is a library that helps you:

• Switch between pages (or components)
• Stay on the same page (SPA = Single Page Application)
• Use nice URLs (like /about or /products/123)
• Keep everything fast and smooth 🚄

🔧 Setting Up React Router

Let’s install it first. Use npm or yarn:

bashCopyEditnpm install react-router-dom

Or if you prefer yarn:

bashCopyEdityarn add react-router-dom

Now, you’re ready to route like a pro! 🧙

🧱 Basic Setup – Creating Pages in React

Let’s make 3 simple components:

jsxCopyEdit// Home.js
function Home() {
  return <h2>🏠 Welcome Home!</h2>;
}

// About.js
function About() {
  return <h2>ℹ️ About Us</h2>;
}

// Contact.js
function Contact() {
  return <h2>📞 Contact Page</h2>;
}

🗂️ Adding Router in App.js

Now set up routing using BrowserRouter, Routes, and Route:

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

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

export default App;

🎉 Boom! You now have a 3-page app without real page reloads!

🧭 Navigation with <Link> 🚪

Using normal <a> tags reloads the page. ❌
Instead, use React Router’s <Link> to move smoothly.

jsxCopyEditimport { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">🏠 Home</Link> | 
      <Link to="/about">ℹ️ About</Link> | 
      <Link to="/contact">📞 Contact</Link>
    </nav>
  );
}

📌 Now you can click and move around — super fast!

🧬 Dynamic Routing – Making URLs Flexible

Let’s say you have a list of products:

jsxCopyEdit<Link to="/product/1">Product 1</Link>
<Link to="/product/2">Product 2</Link>

Now let’s show details for each product using URL parameters:

jsxCopyEdit// Product.js
import { useParams } from "react-router-dom";

function Product() {
  const { id } = useParams();
  return <h2>📦 Product ID: {id}</h2>;
}

And add the route in your app:

jsxCopyEdit<Route path="/product/:id" element={<Product />} />

🧠 :id is like a placeholder. It can be 1, 2, 99, anything!

🧪 Bonus: Use Query Strings

Query strings are like tiny notes in the URL.
Example: /search?term=react

Use useLocation to read them:

jsxCopyEditimport { useLocation } from "react-router-dom";

function SearchPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const term = queryParams.get("term");

  return <h2>🔍 Search term: {term}</h2>;
}

💡 URLs can now hold extra info without creating new routes!

📊 Infographic: React Router Basics

🖼️ A visual showing:

✅ Best Practices for Using React Router

• 🧼 Keep URLs clean and meaningful
• 📦 Organize routes inside a Routes block
• 💾 Use useParams for dynamic data
• 🧠 Use useNavigate for programmatic navigation
• 🔒 Protect private pages with authentication routes (coming soon!)

🏁 Final Thoughts

React Router makes it super easy to build websites with multiple pages, smooth transitions, and friendly URLs — all without reloading. 🏎️

Start with basic routes and links, then explore dynamic paths and nested routes when you’re ready! 💪

🎬 Keep Learning with Web Codder

Enjoyed this article? Want more React magic? 🪄
Hit that subscribe button and follow us everywhere!

• 📺 YouTube: Subscribe Now
• 📸 Instagram: Follow Us
• 💬 WhatsApp Community: Join Here

Let’s build the web — one route at a time! 🚀