Building Modern UIs with React Router v6
1h 14mBeginner2022-08-16
Authors

Guil Hernandez
Software Developer and Educator.
Course details
Are you already familiar with React and ready to level up your skills and build modern user interfaces? In this course, learn how to extend your React applications by adding routing capabilities with React Router, the standard routing library for React. Instructor Guil Hernandez starts by going over routing basics and single page apps. He then illustrates some of the useful React Router components, hooks, and other features that navigate users to all the different views and help create dynamic user interfaces that automatically update whenever the URL changes. He explains how to create 404 or “not found” routes, as well as how the location state, history object, and the history stack work. Guil also provides several challenges along the way so you can practice as you go and make what you’re learning stick.
Skills covered
Interaction DesignReact.jsMetaFront-End Web DevelopmentUser ExperienceLearningWeb Development
Concepts
0. Introduction
- 01 - Building modern UIs
- 02 - What you should know about React
- 03 - Set up the project
1. Routing Basics
- 04 - The fundamentals of routing
- 05 - Install React Router DOM and connect to the browser's URL
- 06 - Configure your first route
- 07 - Use Link to navigate between pages
- 08 - Challenge - Create a navigation with Link and Route
- 09 - Solution - Create a navigation with Link and Route
2. Nested Routes and URL Parameters
- 10 - How nested routing works
- 11 - Create a 404 or No Match Route
- 12 - Define placeholders to create dynamic routes
- 13 - Read and display URL parameters
- 14 - Display active links
- 15 - Challenge - Render a nested UI from route matches
- 16 - Solution - Render a nested UI from route matches
3. Take Routing Further
- 17 - Index routes
- 18 - Navigate programmatically
- 19 - Pass data when navigating programmatically
- 20 - Challenge - Pass location state
- 21 - Solution - Pass location state
Conclusion
- 22 - Next steps
Related courses
- Exploring Ktor with Kotlin Multiplatform and Compose
- Building Modern Projects with React
- Building Modern Learning Experiences with AI
- Building Modern Projects with React (2020)
- Building Angular and ASP.NET Web API Apps
- ASP.NET MVC 5 Essential Training
- .NET MAUI for Beginners
- Data Resilience with Spring and RabbitMQ Event Streaming