How to create nested routes on frontend with React-Router?

Question

JavaScript

Good day!
I started learning React and decided to make a "mail client" as a training application, with simple filtering, reading, etc. functions. Just to get familiar with React.
Having created a certain corcas, I started creating routing using the React-Router library.
It turned out to be easy to create a simple navigation, but when I got to the nested one, I got stuck, completely ..
What is the problem.
I have 3 buttons that allow you to filter messages (I've broken it so far).
The url of the application start page looks like this - localhost:8080/#/mail
When you select a message, the id of the selected message is added to the url - localhost:8080/#/mail/123
When you click on the "Read" button,
localhost: 8080 /#/mail/read find on "categories" of read messages continue my url like this - localhost :8080/#/mail/read/123
to - localhost:8080/#/mail/123
I hope I explained it clearly..
Repository with code: https://github.com/VladislavDev/simple-react-mail-...