На обычном веб-сайте пользователь переходит на разные страницы и обратно, щелкая ссылки или заполняя формы. Однако в одностраничном приложении взаимодействие пользователя не приводит к загрузке новой страницы. Вместо этого он обрабатывается на одной странице, и компоненты реагируют на это взаимодействие. Итак, как вы все еще позволяете пользователям использовать кнопки браузера вперед и назад? Ответ заключается в том, чтобы переварить изменения хэша URI с помощью ES6 Decorator. Например:
В приведенном выше примере вы можете видеть, что у нас есть 3 вещи:
- Основная задача декоратора
Route
заключается в отображении пользовательского интерфейса, когда местоположение соответствует пути маршрута. Link
обеспечивает декларативную, доступную навигацию по вашему приложению.HashRouter
использует хэш-часть URL-адреса (например, window.location.hash), чтобы ваш пользовательский интерфейс синхронизировался с URL-адресом.
Реализуйте маршрутизацию в своем приложении
Во-первых, вам понадобится объект для хранения всех маршрутов:
Затем вы можете создать декоратор Route
для сопоставления route с component:
Вам также нужен компонент Link
для навигации:
Наконец, вам нужен viewport
для замены component
на основе route
при изменении хеша URI:
Очень важной частью является функция matchPath
, место, где вы обнаруживаете компонент и возвращаете:
Это то, что я сделал в библиотеке Extension React.