BigXStar Logo
Routing and Navigation

React Router Basics

Set up client-side routing for multi-page experiences in single-page React applications.

Install React Router

bash
npm install react-router-dom

Basic route configuration

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

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

Navigation links

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

<Link to="/about">About</Link>

404 route

tsx
<Route path="*" element={<NotFound />} />

Next, we will use nested routes for layouts.

PreviousCustom Hooks in ReactHooks Essentials
NextNested Routes in React RouterRouting and Navigation
← Back to Learn React Overview