Introduction and Overview

Welcome! We're stepping into the world of web applications where we'll interact with react-router-dom v6! This package furnishes expressive routing in a React.JS universe. By the end of this lesson, you'll have gleaned a solid understanding of React Router, the fundamentals of routing using react-router-dom v6, and the operation of the Link component.

Note: React Router v7 has been available and is the preferred version since December 2024. However, this course focuses on v6 as it remains widely used in existing applications. The concepts you learn here will still be valuable and largely transferable to v7.

First, we'll familiarize ourselves with the world of React Router, followed by an examination of the specifics of react-router-dom v6, the basics of routing, and concluding with the versatile Link component.

Meet React Router

Embark on a journey into the city of applications where the Router serves as our GPS. It enables us to define paths leading to the various corners of our city, such as Pages or Components. When navigating to a specific path, the Router renders the appropriate component.

For example, if you were building a blog, '/submit' could direct you to the submission form, while '/help' might unveil a help page. We're merely scratching the surface of the possibilities!

Let's discuss the what's new in react-router-dom v6. It ushers in significant changes. We'll focus on the transition from using to using , and the influential shift from defining a 'component' to assigning an 'element'. We must guarantee that everything is cocooned within a (or, more concisely, a ).

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal