Learn

Routing is the process by which a web application uses the current browser URL (Uniform Resource Loader) 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 /wiki/React_(JavaScript_library) page.

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:

URL breakdown

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:

  1. The scheme (eg. HTTP, HTTPS, mailto, etc), which specifies what protocol should be used to access the resource.
  2. The domain (eg. codecademy.com), which specifies the website that hosts the resource. The domain serves as the entry point for your application.
  3. The path (eg. /articles), which identifies the specific resource or page to be loaded and displayed to the user. This is where routing begins!
  4. 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.

Instructions

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.

react-router-lesson-starter-code.zip

Here’s an article about unzipping a .zip file if you need some help!

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?