react-router-dom is the official React Router package for web applications, providing components and hooks like Route, Link, and useNavigate for building client-side navigation.

Syntax

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

Deep Dive Course

react-router-dom is the DOM-specific package within the broader React Router project, distinct from react-router-native, which targets React Native mobile apps instead — it provides the components and hooks needed to build browser-based client-side routing: BrowserRouter to enable routing using the History API, Routes and Route to declare which component renders for which URL pattern, Link and NavLink for navigation, and hooks like useNavigate, useLocation, and useParams for programmatic access to routing state from within components.

1Understanding React Router DOM

💡

Import routing pieces specifically from react-router-dom for web applications, not the base react-router package directly — react-router-dom re-exports everything from react-router plus the DOM-specific pieces like BrowserRouter, so importing from it alone is sufficient.

editor.html

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

localhost:3000

2Practical Example

Here is a real-world application of React Router DOM showing how it is used in production React code.

editor.html

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

function LoginButton() {
  const navigate = useNavigate();
  const handleLogin = () => {
    console.log('Logged in!');
    navigate('/dashboard');
  };
  return <button onClick={handleLogin}>Log In</button>;
}

localhost:3000

3Best Practices

Follow these guidelines when working with React Router DOM:

1. Import routing components and hooks from react-router-dom for web apps, rather than react-router directly or react-router-native, which is for React Native

2. Keep react-router-dom's version consistent with your other React Router-related dependencies, since major versions have introduced meaningfully different APIs over time

3. Check the installed react-router-dom major version against documentation you're following, since v5's Switch/component-prop pattern differs meaningfully from v6's Routes/element-prop pattern

⚠️

Tip: Import routing pieces specifically from react-router-dom for web applications, not the base react-router package directly — react-router-dom re-exports everything from react-router plus the DOM-specific pieces like BrowserRouter, so importing from it alone is sufficient.

editor.html

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

localhost:3000

Examples

Example 01Basic Usage

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

Example 02Advanced Example

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

function LoginButton() {
  const navigate = useNavigate();
  const handleLogin = () => {
    console.log('Logged in!');
    navigate('/dashboard');
  };
  return <button onClick={handleLogin}>Log In</button>;
}

Best Practices

Import routing components and hooks from react-router-dom for web apps, rather than react-router directly or react-router-native, which is for React Native
Keep react-router-dom's version consistent with your other React Router-related dependencies, since major versions have introduced meaningfully different APIs over time
Check the installed react-router-dom major version against documentation you're following, since v5's Switch/component-prop pattern differs meaningfully from v6's Routes/element-prop pattern

Interview Question

Why does React Router split its functionality across separate packages, like react-router-dom for web and react-router-native for React Native, rather than one single universal package?▼

Hint: Think about what platform-specific APIs a router actually needs to hook into on the web versus in a native mobile app.

The core routing logic, matching URL-like paths against route definitions and figuring out which component tree corresponds to the current location, is genuinely platform-independent and lives in the shared react-router core package, but actually implementing navigation requires hooking into whatever platform-specific mechanism controls navigation history, and that part is fundamentally different between environments. On the web, that mechanism is the browser's History API and the URL bar, which react-router-dom's BrowserRouter wraps, while React Native has no browser URL bar or History API at all, instead needing its own in-memory navigation stack, which is exactly what react-router-native provides instead. Splitting the platform-specific navigation implementation into separate packages while sharing the core matching logic lets React Router support genuinely different platforms without forcing either one to carry unnecessary code or assumptions from the other.

Exercises

MediumPractice using React Router DOM in a real scenario.

View Solution

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

Frequently Asked Questions

Why does React Router split its functionality across separate packages, like react-router-dom for web and react-router-native for React Native, rather than one single universal package?▼

Related Functions

routingbrowserrouterusenavigate