En esta sección, iniciaremos un recorrido práctico para construir el sitio web de una empresa utilizando React Router. Este proyecto proporcionará experiencia práctica en la implementación de rutas dentro de una aplicación React. El sitio web constará de tres páginas: "Home", "About" y "Contacts". Cada página tendrá su propia URL, y exploraremos cómo configurar rutas para ellas.

Antes de profundizar en los detalles, revisemos una visión general del proyecto:

• Objetivo del proyecto: Crear un sitio web sencillo de empresa con tres páginas distintas utilizando React Router para la navegación;
• Estructura de páginas: El sitio web tendrá las siguientes páginas:
  • "Home" con la ruta: /;
  • "About" con la ruta: /about;
  • "Contacts" con la ruta: /contacts.
• Componentes de React: Todos los componentes de React y estilos para este proyecto están predefinidos, lo que nos permite centrarnos únicamente en la funcionalidad proporcionada por React Router;
• Code Sandbox: Tendrá acceso a un Code Sandbox que contiene el código completo de la aplicación. Se recomienda inspeccionar el código detenidamente para comprender los conceptos fundamentales de enrutamiento.

La ilustración que se presenta a continuación muestra la funcionalidad final de la aplicación.

Aquí se encuentra el código inicial en formato de Code Sandbox:

Cómo trabajar con Code Sandbox