Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Building Modern UIs with React Router v6

Building Modern UIs with React Router v6

1h 14mBeginner2022-08-16

Authors

Guil Hernandez

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

Related learn paths

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal