Defining routes

Learn to set up a route tree with Routes and Route.

Defining routes

To define multiple routes, you add multiple <Route>s inside <Routes>. Each Route takes a path and an element.

Example: <Route path="/" element={ '{ <Home /> }' } />, <Route path="/about" element={ '{ <About /> }' } />, <Route path="/contact" element={ '{ <Contact /> }' } />.

When the URL changes, React Router picks the best match. If /about is opened, the About component renders. If no route matches, nothing renders (or a 404 route is defined).

404 route

A 404 route can be defined for unmatched URLs. <Route path="*" element={ '{ <NotFound /> }' } /> catches all unmatched paths.

* is a wildcard; it matches any URL. It's important to put this route last; because React Router matches top to bottom.

A 404 page prevents users from getting lost. It contains a "Page not found" message and a link back home. This matters for user experience.

Exercise Define three routes

Complete the skeleton. Write an App component. Inside <Routes>, define three routes: <Route path="/" element={ '{ <Home /> }' } />, <Route path="/about" element={ '{ <About /> }' } />, <Route path="*" element={ '{ <NotFound /> }' } />. Export it. (Assume all components are imported.)

Show example solution

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

export default App;

Test yourself

If URL is /about, which component renders?
- Home
- Contact
- About
- NotFound
Show answer

About — The answer: About.

Route props

Route's two core props: path and ____.

Show answer

Route's two core props: path and element.

Match the route definitions

path

URL
element

component
*

404
Routes

container

Next lesson: Link and NavLink

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies