"No Match" Route and Passing Props to Component

Introduction to No Match route

When developing a website with many routes, there are cases where the user can mistype the URL and they’re directed to a blank screen. We need to be able to redirect the user to the correct URL or let them know that the page they are looking for isn’t available. We can do this by adding a No Match route in the application.

What is the No Match route?

Any time you try to visit a page on the website and get a message that says, “The page you are looking for doesn’t exist,” or “404 Error,” that means there’s either a mistake in the URL or there’s no route for such a page.

All websites must have a 404 (No Match route) page that informs the user that the page doesn’t exist and provides a way to redirect them to a working page.

The react-router provides a way to catch all the routes that do not match the defined routes. Refer to the following code:

<Route path="*" element={<h2>The page you are looking for is not here!</h2>} />;

In the above line, * only matches the routes that aren’t declared and renders the element or 404 page.

Create a No Match route