MENU


Basic Example

A <Routes> looks through all its children <Route> elements and renders the one whose path best matches the current URL. (In React Router 5 this was the job of a separate <Switch> component. <Switch> was renamed <Routes>, and the exclusive best-match behavior it provided is now always on – there is no more <Route exact> attribute to opt into it.)

This site has 3 pages, all of which are rendered dynamically in the browser (not server-rendered). Although the page does not ever refresh, notice how React Router keeps the URL up to date as you navigate through the site. This preserves the browser history, making sure things like the back button and bookmarks work properly.


import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/dashboard">Dashboard</Link></li>
        </ul>
        <hr />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </Router>
  );
}
function Home() { return (<div><h2>Home</h2></div>); }
function About() { return (<div><h2>About</h2></div>); }
function Dashboard() { return (<div><h2>Dashboard</h2></div>); }