No Such Page in JavaScript

A page can be missing in two different ways. The address can be wrong: /product/3 has a typo, and no route matches it. Or the address is right but the thing isn't there: /products/99 matches the route /products/:id, and the API answers 404 because there is no product 99.

The second kind already works: the given ProductPage shows the API's error, Product not found. For the first kind, React Router draws nothing in main and only warns in the console: No routes matched location "/product/3". The visitor sees an empty page.

A route with the path * is a catch-all: it matches any address. React Router always picks the most specific route, so * only wins when no other route fits. In a blog it could look like this:

<Route path="/posts/:slug" element={<PostPage />} />
<Route path="*" element={<Missing />} />

Your page must show:

open /products/99         →  heading 2: Product not found   (the API answered 404)
open /product/3           →  heading 2: Page not found
                             text: There is no page at this address.
                             link: Back to the shop -> /
click "Back to the shop"  →  the Products list, and the address bar shows /

Your task: in src/App.jsx, fill NotFoundPage with a heading, a sentence and a Link home, then add a last route with the path * that shows it.

Assignment
Follow the Coding Tutorial to build the NotFoundPage and the catch-all route that shows it.

Hint
Use Link, not a, for the way home: a plain link makes the browser load the whole page again. The * route goes last inside Routes.