How to Use React Router: Simple Guide with Examples

Use react-router-dom by wrapping your app in a BrowserRouter, then define routes with Routes and Route components. Use Link to navigate between pages without reloading.

Syntax

React Router uses these main parts:

• BrowserRouter: Wraps your app to enable routing.
• Routes: Contains all your route definitions.
• Route: Defines a path and the component to show.
• Link: Lets users navigate without page reload.

jsx

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

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>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

Example

This example shows a simple React app with two pages: Home and About. Clicking the links changes the page content without reloading the browser.

jsx

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav style={{ marginBottom: '1rem' }}>
        <Link to="/" style={{ marginRight: '1rem' }}>Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Output

Home Page (with clickable links 'Home' and 'About' above)

Clicking 'About' changes the text to 'About Page' without page reload.

Common Pitfalls

• Not wrapping your app in BrowserRouter causes routing to fail.
• Using a tags instead of Link reloads the page, losing React state.
• Forgetting to use element prop with JSX in Route causes errors.
• Paths must match exactly or use wildcards; otherwise routes may not render as expected.

jsx

/* Wrong: Using <a> tag causes full page reload */
<a href="/about">About</a>

/* Right: Use Link for client-side navigation */
<Link to="/about">About</Link>

Quick Reference

Feature	Usage	Description
BrowserRouter	...	Wraps your app to enable routing.
Routes	...	Contains all route definitions.
Route	} />	Defines a route path and component.
Link	Text	Navigates without page reload.
useNavigate	const navigate = useNavigate(); navigate('/path');	Programmatic navigation.

Key Takeaways

Always wrap your app in BrowserRouter to enable routing.

Use Routes and Route to define paths and components.

Use Link instead of a tags for navigation to avoid page reloads.

Remember to pass JSX elements to the element prop in Route.

Use useNavigate hook for navigation in code.