🚀 Introduction:

When you create websites with multiple pages — like Home Page, About Page, Contact Page —
then React Router helps you move between pages without reloading the whole website.

👉 React Router makes your React app work like a real website with smooth page navigation.

---

🔥 1. Installing react-router-dom

To use Routing in React, first you need to install a package called react-router-dom.
This package helps us to create multiple pages inside React app.

👉 Open your terminal and run:

npm install react-router-dom

---

🔥 2. Basic Concepts of React Router

---

🔥 3. How to Set Up Routing

Step-by-Step Example 👇

---

👉 /src/App.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/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;

---

👉 Create Pages

In /src/pages folder, create these 3 files:

---

Home.js

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Home Page 🏠</h1>
      <Link to="/about">Go to About Page</Link><br/>
      <Link to="/contact">Go to Contact Page</Link>
    </div>
  );
}

export default Home;

---

About.js

import React from 'react';
import { Link } from 'react-router-dom';

function About() {
  return (
    <div>
      <h1>About Us 📖</h1>
      <Link to="/">Back to Home</Link>
    </div>
  );
}

export default About;

---

Contact.js

import React from 'react';
import { Link } from 'react-router-dom';

function Contact() {
  return (
    <div>
      <h1>Contact Us 📞</h1>
      <Link to="/">Back to Home</Link>
    </div>
  );
}

export default Contact;

---

🔥 4. Important Points About Each Part

✅ BrowserRouter

• Wrap your entire app inside <BrowserRouter>.

• It manages the history of the URLs internally.

✅ Routes and Route

• <Routes> is like a container.

• Inside it, <Route> defines "which component will open at which URL".

Example:

<Route path="/about" element={<About />} />

👉 means when user types /about, the About component will show.

✅ Link

• Instead of using normal <a> tags, use <Link>.

• It moves to another page without refreshing the app.

Example:

<Link to="/contact">Contact Us</Link>

✅ useNavigate

• When you want to navigate (move) programmatically (on button click, after form submit etc.), use useNavigate.

Example:

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  function goToContact() {
    navigate('/contact');
  }

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToContact}>Go to Contact Page</button>
    </div>
  );
}

---

✅ useParams

• If your URL has dynamic values (like product id, user id), use useParams to read that value.

Example: URL → /product/5 (here 5 is dynamic id)

Routing setup:

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

Reading id inside Product.js:

import { useParams } from 'react-router-dom';

function Product() {
  const { id } = useParams();

  return (
    <div>
      <h1>Product ID: {id}</h1>
    </div>
  );
}

export default Product;

---

📦 Real Life Example of React Router:

• E-commerce websites: Home Page, Products Page, Product Details Page

• Blog websites: Home, Articles, Single Article page

• Portfolio websites: Home, About, Projects, Contact

👉 All these pages move smoothly without reloading — thanks to React Router!

---

🎯 Final Summary

---

✨ Bonus Tip:

If your app is big, keep Navbar outside <Routes>, so that Navbar is always visible and only page content changes.

Example:

<BrowserRouter>
  <Navbar />
  <Routes>
    ...
  </Routes>
</BrowserRouter>

---

🔥 Quick Code Recap (Diagram)

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
    <Route path="/product/:id" element={<Product />} />
  </Routes>
</BrowserRouter>

---

🌟 Conclusion

✅ React Router helps you create multi-page apps easily.
✅ Navigation becomes smooth and fast without reloading the page.
✅ You can manage simple and complex websites easily using Routes, Link, Navigate and Params.

---

📌 React Router – FAQ (Frequently Asked Questions)

---

Q1. Is there any alternative to React Router in React applications?

Answer:
Yes, while react-router-dom is the most widely used and official routing library for React, there are a few alternatives such as:

• Wouter – A minimalist alternative that is lightweight and simpler.

• Next.js Routing – If you are using Next.js, it comes with built-in file-based routing.

• Reach Router – Previously used, but now merged with React Router (v6).

However, for most React projects, especially production-grade ones, React Router remains the most robust and feature-rich solution.

---

Q2. What is the biggest benefit of using React Router?

Answer:
The most significant benefit of using React Router is that it enables client-side routing. This means:

• Pages can switch without reloading the entire website.

• It improves performance and creates a smooth user experience.

• It allows complex navigation like nested routes, dynamic URLs, redirects, and protected routes — all within a single-page application (SPA).

React Router gives you full control over navigation, making your application feel faster and more professional.

---

Q3. Can large-scale, enterprise-level applications be managed using React Router?

Answer:
Absolutely. React Router is production-ready and widely used in large-scale applications by many companies. It supports:

• Nested and dynamic routes

• Route guards and private routes

• Lazy loading (code splitting)

• Programmatic navigation

• Custom route rendering

With proper architecture and state management (like Redux or Context API), React Router can scale efficiently, making it fully suitable for enterprise-level applications.

---

🔔 Stay Connected

If you found this article helpful and want to receive more such beginner-friendly and industry-relevant React notes, tutorials, and project ideas —
📩 Subscribe to our newsletter by entering your email below.

And if you're someone who wants to prepare for tech interviews while having a little fun and entertainment,
🎥 Don’t forget to subscribe to my YouTube channel – Knowledge Factory 22 – for regular content on tech concepts, career tips, and coding insights!

Stay curious. Keep building. 🚀