T

TechIdea

Ecosystem

Reactintermediate9 min read

Routing with React Router

Navigating between different pages without reloading the browser using React Router.

Learning Goals

1
Understand the purpose and application of Routing with React Router in React projects.
2
Implement clean, functional code demonstrating Routing with React Router syntax.
3
Identify and avoid common coding mistakes associated with routing with react router.
4
Apply Routing with React Router features to solve a realistic intermediate-level development task.

The Core Concept

React is primarily used to build Single Page Applications (SPAs). This means the browser only ever loads one HTML file. To create the illusion of navigating between multiple pages (like Home, About, and Contact), we use routing libraries like React Router. It watches the URL in the browser's address bar and swaps out which React components are currently visible on the screen, instantly, without a slow page refresh.

Visual guide

React concept flow

A simple original diagram to connect the lesson idea with real project flow.

Code & Implementation

react
// Requires: npm install react-router-dom
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() { return <h2>Home Page</h2>; }
function About() { return <h2>About Us</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>
  );
}

Expected Output

Home | About

Home Page

Blog Application

Hands-on practice task

Required for Mastery

The Challenge

A simple multi-page blog. It has a home page showing a list of post titles, and clicking a title navigates to a detailed view of that post.

Helpful Hints

  • Set up React Router with two routes: `/` (Home) and `/post/:id` (Post Detail).
  • Create a hardcoded array of blog posts in a separate file to act as your database.
  • In the Post Detail component, use the `useParams` hook to get the ID from the URL and display the correct post.

Quick Knowledge Check

How do I redirect a user programmatically (e.g., after login)?
Use the `useNavigate` hook provided by React Router. Call `navigate('/dashboard')` in your success handler.

Continue Learning

Next steps after this lesson

Practice task

A simple multi-page blog. It has a home page showing a list of post titles, and clicking a title navigates to a detailed view of that post.

Ready to take action?

Supercharge your career workflows!

Discover free online utilities to format data, build job applications, and automate your productivity routine with TechIdea.

Growth Newsletter

Get practical AI tools, SEO tips, and growth guides weekly.

Join creators, students, and businesses scaling with TechIdea.