Demon Tech Roadmap

React

React Router

React Router handles navigation across different pages.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

React naturally builds "single-page" applications that do not load new HTML files. To create the illusion of multiple pages, developers use React Router. It swaps out different components depending on the URL the user clicks.

Example

1/* this sets up routing */
2import { BrowserRouter, Routes, Route } from "react-router-dom";
3
4function App() {
5  return (
6    <BrowserRouter>
7      <Routes>
8        <Route path="/" element={<Home />} />
9        <Route path="/about" element={<About />} />
10      </Routes>
11    </BrowserRouter>
12  );
13}

Key Points

It requires installing the `react-router-dom` package.
`BrowserRouter` wraps the entire application.
`Routes` groups all the individual paths together.
`Route` links a specific URL path to a specific component.

Up Next

Continue your journey with the next topic.

Go to React Code Splitting ❯