How to make specific routes in react-CodePudding

I'm trying to make routes with specific routes. Right now, I'm able to go between the routes but I don't know how to make it specific. For example:

 <Route path='/' element={<HomePage/>} />
 <Route path='/User' element={<UserPage/>} />

So right now I can go between the pages.

but if I write anything else in the URL, like: "localhost:3000/gibberish", it will go there, and of course, nothing will show on the page.

instead, I want it to redirect the client to a page that I have created, "Page not found".

Any idea how I can do that?

Thank you so much in advance!!

CodePudding user response：

Use * to redirect to your component when no other routes match

 <Route path="*" element={<PageNotFound />} />

CodePudding user response：

React Router documentation provides an example to handle 404/NotFound.

You essentially need to specify a wildcard with * that will match everything that is not defined in your router already.