React.Js Router v5 in Examples

All you need to know about using React.js react-router-dom package and how to use it (with code and result GIF examples).

What will be covered in this article:

• 1. Installing
• 2. Creating your first Routes using Switch
• 3. Nested Routing
• 4. Prompt component
• 5. NavLink component
• 6. 404 page (page not found)
• 7. Getting Route props (match, location, history)
• 8. Route Parameters
• 9. URLSearchParams
• 10. Redirect component
• 10.1. Private routes
• 10.2. Redirect from an old page to a new one
• 11. Animation
• 12. Secure your application
• 13. Using matchPath hook

I will be using a starter Typescript React.js project that was created using the most popular create-react-app script. No additional packages (only eslint and prettier, but that is for code formatting 😉)

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript