React Router Tutorial: A Complete Guide to Routing in React

In modern web development, React has become a staple for building dynamic single-page applications (SPAs). But what really enables the seamless transition between components and URLs in a React app? That’s where React Router comes in. In this detailed guide, we’ll walk you through everything you need to know about routing in React, including how to use React Router DOM, implement BrowserRouter, create routes, use <Link>, and more—all with React Router v6 (the latest version).

Whether you’re a beginner or just brushing up, this guide will serve as a ReactJS Router tutorial packed with code examples and insights.

What Is Routing in React?

In a traditional multi-page app, each page is served from the server. In contrast, React uses client-side routing, which means that different “pages” are components rendered conditionally based on the URL. This approach results in a faster, smoother experience because the page isn’t reloaded each time.

React doesn’t come with built-in routing. That’s why we use React Router, a powerful routing library that helps manage navigation, URLs, and rendering logic in React apps.

Installing React Router DOM

React Router is available via the react-router-dom package for web applications.

npm install react-router-dom

npm install react-router-dom

For React Router v6 (latest as of 2025), you don’t need to install anything extra for basic routing.

Setting Up BrowserRouter in React

To get started with routing, you need to wrap your app with the <BrowserRouter> component. This enables React to monitor the URL and match it to the correct route.

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const Root = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

export default Root;

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const Root = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

export default Root;

Defining Routes in React

Next, you’ll define your application routes using the <Routes> and <Route> components.

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

This is a classic react router example, defining two routes—home and about.

Using <Link> to Navigate Between Routes

Instead of using <a href>, React Router provides the <Link> component to navigate between routes without reloading the page.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Navigate Programmatically with useNavigate()

To navigate in response to user actions (like form submission), use the useNavigate() hook.

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

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

  const handleLogin = () => {
    // authentication logic here
    navigate('/dashboard');
  };

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

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

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

  const handleLogin = () => {
    // authentication logic here
    navigate('/dashboard');
  };

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

Nested Routing in React

React Router supports nested routes, which are great for building layouts like dashboards or profile pages with submenus.

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="analytics" element={<Analytics />} />
    <Route path="reports" element={<Reports />} />
  </Route>
</Routes>

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="analytics" element={<Analytics />} />
    <Route path="reports" element={<Reports />} />
  </Route>
</Routes>

In the Dashboard component, use <Outlet /> to render child routes.

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

React Router DOM with Dynamic Routes

You can pass parameters through the route path using a colon :. This is useful for dynamic pages like user profiles.

<Route path="/user/:id" element={<UserProfile />} />

<Route path="/user/:id" element={<UserProfile />} />

Then in UserProfile, access the parameter with useParams():

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

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

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

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

Redirecting in React Router

To redirect a user (e.g., from /login after successful login), use Navigate:

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

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/login" />;
}

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

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/login" />;
}

React Router Hooks Overview

React Router v6 introduced powerful hooks:

BrowserRouter vs HashRouter in React

Use HashRouter if you’re deploying to static hosts like GitHub Pages. Otherwise, stick to BrowserRouter for cleaner URLs and better SEO.

Summary of Common Routing Terms

• Route in React: A path-to-component mapping
• React Router DOM: Routing library for React web apps
• BrowserRouter in React: Uses HTML5 history API
• ReactJS Router example: A working app showing routing behavior
• Link in React JS: Component to navigate pages without full reload

Final Thoughts

Whether you’re building a small portfolio or a large web app, mastering React routing with React Router DOM is essential. With features like BrowserRouter, nested routing, dynamic routes, and hooks like useNavigate and useParams, the library provides a comprehensive solution to navigation in React.

By following this guide and trying out the ReactJS router examples, you’ll be on your way to creating dynamic, seamless, and user-friendly applications.

FAQ: Routing in React