Real World Example

An e-commerce site needs a product page per id, a cart, a checkout that only logged-in users can open, and a 404 page.

<Routes>
  <Route element={<Layout />}>
    <Route path="/" element={<Home />} />
    <Route path="/products/:id" element={<ProductPage />} />
    <Route path="/cart" element={<Cart />} />
    <Route element={<ProtectedRoute />}>
      <Route path="/checkout" element={<Checkout />} />
      <Route path="/orders" element={<MyOrders />} />
    </Route>
    <Route path="*" element={<NotFound />} />
  </Route>
</Routes>