Nesta seção, iniciaremos uma jornada prática para construir um site corporativo utilizando o React Router. Este projeto proporcionará experiência prática na implementação de rotas em uma aplicação React. O site será composto por três páginas: "Home", "About" e "Contacts". Cada página terá sua própria URL, e exploraremos como configurar rotas para elas.

Antes de entrarmos nos detalhes, vamos obter uma visão geral do projeto:

• Objetivo do Projeto: Criar um site corporativo simples com três páginas distintas utilizando o React Router para navegação;
• Estrutura das Páginas: O site terá as seguintes páginas:
  • "Home" com o caminho: /;
  • "About" com o caminho: /about;
  • "Contacts" com o caminho: /contacts.
• Componentes React: Todos os componentes React e estilos para este projeto já estão definidos, permitindo que o foco seja exclusivamente na funcionalidade fornecida pelo React Router;
• Code Sandbox: Você terá acesso a um Code Sandbox contendo o código completo do aplicativo. Recomendamos analisar o código cuidadosamente para compreender os conceitos fundamentais de roteamento.

A ilustração apresentada abaixo exibe a funcionalidade final da aplicação.

Aqui está o código inicial no formato do Code Sandbox:

Como trabalhar com o Code Sandbox