A Route is declared inside a Routes container (React Router v6+) and specifies a path pattern, which can include static segments, dynamic segments prefixed with a colon like :id, and wildcards, along with an element prop specifying the component to render when the current URL matches that pattern. Routes checks all its child Route elements and renders the single best match for the current URL — in v6, matching considers specificity, so a more specific static route generally takes priority over a more general dynamic one, but only one Route ultimately renders per Routes.
1Understanding Route
A Route is declared inside a Routes container (React Router v6+) and specifies a path pattern, which can include static segments, dynamic segments prefixed with a colon like :id, and wildcards, along with an element prop specifying the component to render when the current URL matches that pattern. Routes checks all its child Route elements and renders the single best match for the current URL — in v6, matching considers specificity, so a more specific static route generally takes priority over a more general dynamic one, but only one Route ultimately renders per Routes.
In React Router v6, use the element prop, <Route path="..." element={<Component />} />, not the older component prop from v5 — the two versions have meaningfully different Route APIs, so mixing documentation from different versions is a common source of confusion.
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products/:id" element={<ProductPage />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}2Practical Example
Here is a real-world application of Route showing how it is used in production React code.
import { Routes, Route, Outlet } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route path="about" element={<About />} />
</Route>
</Routes>
);
}
function Layout() {
return (
<div>
<Nav />
<Outlet />
</div>
);
}3Best Practices
Follow these guidelines when working with Route:
1. Use the element prop with JSX, <Route element={<Component />} />, for React Router v6, rather than the older v5-style component prop
2. Order or structure routes so more specific paths are matched correctly against more general or wildcard ones, understanding v6's own path-ranking matching algorithm
3. Use nested Route elements for layouts shared across several child routes, rendering the shared layout once with an Outlet for the matched child route's content
Tip: In React Router v6, use the element prop, <Route path="..." element={<Component />} />, not the older component prop from v5 — the two versions have meaningfully different Route APIs, so mixing documentation from different versions is a common source of confusion.
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products/:id" element={<ProductPage />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}