Routes

Renders a branch of Route elements that best matches the current location. Note that these routes do not participate in data loading, actions, code splitting, or any other route module features.

import { Routes, Route } from "react-router";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="users/*" element={<Users />} />
</Routes>

Type Declaration

export interface RoutesProps {
  children?: React.ReactNode;
  location?: Partial<Location> | string;
}

export function Routes({
  children,
  location,
}: RoutesProps): React.ReactElement | null;

Props

children · React.ReactNode

Nested <Route> elements that define the route configuration.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="users" element={<Users />}>
    <Route path=":id" element={<UserProfile />} />
  </Route>
</Routes>

location · Partial<Location> | string

The Location to match against. Defaults to the current location. This is useful for testing or when you want to render routes based on a different location.

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

Example

Basic Usage

import { BrowserRouter, Routes, Route } from "react-router";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Nested Routes

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="users" element={<Users />}>
      <Route path=":id" element={<UserProfile />} />
      <Route path=":id/edit" element={<EditUser />} />
    </Route>
  </Route>
</Routes>

No Match (404)

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

Multiple Route Sets

function App() {
  return (
    <BrowserRouter>
      <header>
        <Routes>
          <Route path="/" element={<HomeNav />} />
          <Route path="about" element={<AboutNav />} />
        </Routes>
      </header>

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

Behavior

• Renders the first <Route> that matches the current location
• Uses a ranking system to determine the best match when multiple routes could match
• Returns null if no routes match
• Static routes (no params) rank higher than dynamic routes (:id)
• Routes with more segments rank higher than routes with fewer segments

Notes

• In most modern apps, you’ll use createBrowserRouter instead for data loading, actions, and other advanced features
• Routes are matched relative to their parent route’s path
• The * wildcard can be used to match any remaining path segments