Introduction: Why React Router Is Essential

In traditional websites, each click on a navigation link reloads the entire page from the server. That’s inefficient and slow—especially for modern single-page applications (SPAs). Enter React Router.

React Router is the standard routing library for React. It lets you build navigation within a React app without page reloads, providing seamless and fast transitions between views. This improves both user experience and application performance.

Whether you're building a blog, dashboard, or eCommerce platform, mastering React Router is a must for professional React development.

Getting Started with React Router

✅ 1. Install React Router

To begin using React Router, install it via npm:

npm install react-router-dom

Or with Yarn:

yarn add react-router-dom

Key Concepts of React Router

React Router revolves around several important components:

Step-by-Step: Creating Routes in React

✅ 2. Set Up Basic Routing

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> |{' '}
        <Link to="/about">About</Link>
      </nav>

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

export default App;

✅ Explanation:

• <BrowserRouter> enables routing by syncing with the browser’s history API.

• <Routes> wraps your route definitions.

• <Route> matches a path to a component.

• <Link> replaces <a> for client-side navigation.

✅ 3. Using Dynamic Routes with useParams()

function Product() {
  const { id } = useParams(); // Extract 'id' from URL
  return <h2>Product ID: {id}</h2>;
}

Add the route:

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

• Access dynamic parts of the URL using useParams().

• Useful for blogs, product pages, user profiles, etc.

✅ 4. Programmatic Navigation with useNavigate()

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

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

  const handleLogin = () => {
    // Fake login logic
    navigate('/dashboard'); // Redirect to dashboard
  };

  return <button onClick={handleLogin}>Login</button>;
}

• Navigate without <Link>—ideal after form submissions or API calls.

✅ Full React Router Example

import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useParams,
  useNavigate,
} from 'react-router-dom';

function Home() {
  return <h2>Welcome to the Homepage</h2>;
}

function About() {
  return <h2>About Us</h2>;
}

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

function Dashboard() {
  return <h2>User Dashboard</h2>;
}

function Login() {
  const navigate = useNavigate();
  const handleLogin = () => navigate('/dashboard');

  return (
    <div>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> |{' '}
        <Link to="/about">About</Link> |{' '}
        <Link to="/product/101">Product</Link> |{' '}
        <Link to="/login">Login</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/product/:id" element={<Product />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

⚠️ Tips & Common Pitfalls

✅ Tips

• Always use Link instead of <a> to avoid full-page reloads.

• Use useNavigate() for redirecting after actions like login or form submission.

• Extract dynamic segments with useParams() for flexible routing.

• Organize routes in a separate file for larger apps.

❌ Common Pitfalls

• Forgetting to wrap your app in <BrowserRouter>.

• Using exact (deprecated in v6) — no longer needed.

• Using component= instead of element= — updated syntax in React Router v6.

• Nesting <Route> without wrapping in a parent <Routes> tag.

React Router v5 vs v6 (Comparison Table)

Conclusion: Best Practices for Using React Router

React Router makes it easy to create fast, dynamic, and modern single-page applications. With its intuitive API, dynamic routing, and full integration with the browser history, it's the go-to choice for React navigation.

Key Takeaways:

• Use <Routes> and <Route> to define pages.

• Use Link and useNavigate() to handle navigation.

• Extract URL params with useParams().

• Organize routes modularly in large projects.

• Upgrade to React Router v6+ for simplified syntax and better performance.