На обычном веб-сайте пользователь переходит на разные страницы и обратно, щелкая ссылки или заполняя формы. Однако в одностраничном приложении взаимодействие пользователя не приводит к загрузке новой страницы. Вместо этого он обрабатывается на одной странице, и компоненты реагируют на это взаимодействие. Итак, как вы все еще позволяете пользователям использовать кнопки браузера вперед и назад? Ответ заключается в том, чтобы переварить изменения хэша URI с помощью ES6 Decorator. Например:

В приведенном выше примере вы можете видеть, что у нас есть 3 вещи:

  • Основная задача декоратора Route заключается в отображении пользовательского интерфейса, когда местоположение соответствует пути маршрута.
  • Link обеспечивает декларативную, доступную навигацию по вашему приложению.
  • HashRouter использует хэш-часть URL-адреса (например, window.location.hash), чтобы ваш пользовательский интерфейс синхронизировался с URL-адресом.

Реализуйте маршрутизацию в своем приложении

Во-первых, вам понадобится объект для хранения всех маршрутов:

Затем вы можете создать декоратор Route для сопоставления route с component:

Вам также нужен компонент Link для навигации:

Наконец, вам нужен viewport для замены component на основе route при изменении хеша URI:

Очень важной частью является функция matchPath, место, где вы обнаруживаете компонент и возвращаете:

Это то, что я сделал в библиотеке Extension React.