Overview

In this section, we'll embark on a practical journey to build a company website using React Router. This project will give you hands-on experience in implementing routing within a React application. The website will consist of three pages: "Home", "About", and "Contacts". Each page will have its own URL, and we'll explore how to set up routes for them.

Before we dive into the details, let's get an overview of the project:

• Project Goal: We aim to create a simple company website with three distinct pages using React Router for navigation;
• Page Structure: The website will have the following pages:
  • "Home" with the path: /;
  • "About" with the path: /about;
  • "Contacts" with the path: /contacts.
• React Components: All React components and styles for this project are predefined, allowing us to focus solely on the functionality provided by React Router;
• Code Sandbox: You will have access to a Code Sandbox containing the complete app code. We encourage you to inspect the code carefully to understand the core concepts of routing.

The illustration presented below displays the final functionality of the application.

Here is the initial code in the form of the Code Sandbox:

How to work with Code Sandbox