Conteúdo do Curso
React Router Essentials
React Router Essentials
1. Understanding React Router and URL Structures
2. Implementing React Router in a React App
Overview of the Multi-Page WebsiteInstalling React RouterEnabling Routing in a React AppDefining Routes for NavigationRecap: First Steps in React RouterOptimizing Imports with Lazy LoadingImplementing a Fallback ComponentRecap: Second Steps in React RouterCreating and Managing NavigationExploring React Router's Complete LogicRecap of React Router Fundamentals
Overview of the Multi-Page Website
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
.
- "Home" with the path:
- 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
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 2. Capítulo 1