Routing is the process by which a web application uses the current browser URL (Uniform Resource Locator) to determine what content to show a user. For example, a user visiting wikipedia’s
/wiki/Node.js page would expect to see something different from the
By organizing an application’s content and displaying only what the user has requested to see, routing allows for rich, engaging, and clear user experiences.
Before we dive into the lesson, let’s briefly go over the basic structure of URLs. Consider this URL:
Every URL is essentially a request for some resource and each component of the URL serves to specify which resource is desired. URLs consist of several components, some of which are mandatory and some of which are optional:
- The scheme (eg.
mailto, etc), which specifies what protocol should be used to access the resource.
- The domain (eg.
codecademy.com), which specifies the website that hosts the resource. The domain serves as the entry point for your application.
- The path (eg.
/articles), which identifies the specific resource or page to be loaded and displayed to the user. This is where routing begins!
- The optional query string (eg.
?search=node), which appears after a ‘?’ and assigns values to parameters. Common uses of query strings include search parameters and filters.
Depending on the kind of application you build, there are different ways to handle the requests coming into your server. A popular back-end solution is to use the Express routing framework. In this lesson, we will cover React Router, a popular front-end routing solution designed specifically for React applications.
Jan 2022 Update: These lesson’s exercises are meant to be written using React Router v5. React Router v6 introduces breaking changes and your code will not work using these instructions if you install v6. Check out React Router’s documentation to learn more about upgrading from v5 to v6.
Each exercise in this lesson will feature a video that will guide you through the process of implementing routing in a React application with React Router – all on your own computer!
To get started, click on the video to learn about the application you will be building.
Before we begin learning about React Router, click on the link below to download the starter code
.zip file for the project you will be working on. Make sure to store this file in a location that you can find easily before unzipping it! Then, move on to the next exercise.
Here’s an article about unzipping a
.zip file if you need some help!