У цьому розділі ми розпочнемо практичний шлях зі створення вебсайту компанії з використанням React Router. Цей проєкт надасть вам практичний досвід впровадження маршрутизації у React-додатку. Вебсайт складатиметься з трьох сторінок: "Home", "About" та "Contacts". Кожна сторінка матиме власну URL-адресу, і ми розглянемо, як налаштувати маршрути для них.

Перш ніж перейти до деталей, ознайомимося з оглядом проєкту:

• Мета проєкту: Створення простого вебсайту компанії з трьома окремими сторінками, використовуючи React Router для навігації;
• Структура сторінок: Вебсайт міститиме такі сторінки:
  • "Home" з шляхом: /;
  • "About" з шляхом: /about;
  • "Contacts" з шляхом: /contacts.
• React-компоненти: Усі React-компоненти та стилі для цього проєкту вже визначені, що дозволяє зосередитися виключно на функціональності, яку надає React Router;
• Code Sandbox: Ви матимете доступ до Code Sandbox із повним кодом застосунку. Рекомендуємо уважно ознайомитися з кодом для кращого розуміння основних концепцій маршрутизації.

Ілюстрація, наведена нижче, демонструє фінальну функціональність застосунку.

Нижче наведено початковий код у вигляді Code Sandbox:

Як працювати з Code Sandbox