Когда разрабатывается приложение ReactJS, большинство из нас сталкивается с требованием отображать страницу 404 для всех недопустимых путей. С такими фреймворками, как AngularJS, достаточно просто добавить еще один маршрут с подстановочным знаком в виде двойной звездочки (**
). Но с хеш-маршрутизацией ReactJS все немного по-другому, и давайте посмотрим, как это можно сделать.
В этой статье давайте рассмотрим очень простое приложение React только с одним компонентом, обеспечивающим вход в систему. Когда пользователь получает доступ к пути /#/login
, этот компонент входа должен отображаться. Для этого мы можем определить конфигурацию нашего маршрутизатора следующим образом.
<HashRouter>
<Route exact path="/login" component={LoginComponent}/>
</HashRouter>
Теперь давайте попробуем использовать недопустимый хэш-маршрут, такой как /#/invalid/
, и посмотрим, что произойдет.
Ой! 😕 Переход по недопустимому пути отображает пустую страницу без каких-либо компонентов. Итак, как мы можем исправить это, чтобы показать компонент, который отображает сообщение 404?
Шаг 1 — Добавление маршрута без пути
Первым шагом для достижения ожидаемого поведения является добавление маршрута без пути, который отображает компонент 404. Тогда новая конфигурация маршрутизатора будет выглядеть так, как показано ниже.
<HashRouter>
<Route exact path="/login" component={LoginComponent}/>
<Route component={My404Component}/>
</HashRouter>
Теперь, если мы перезагрузим наш неверный путь, мы получим нашу красивую страницу 404.
Итак, мы достигли своей цели, не так ли? Чтобы быть уверенным, давайте вернемся на нашу страницу входа и посмотрим, есть ли она уже там.
Ой! Теперь у нас есть компонент 404, отображаемый не только для недопустимых путей, но и для допустимых путей. Давайте посмотрим, почему.
Когда мы добавляем маршрут без пути, этот маршрут соответствует каждому пути. Из-за этого он будет отображать свой компонент со всеми другими путями в дополнение к компонентам, специфичным для этого пути.
Итак, что мы должны сделать, чтобы сообщить маршрутизатору React, что он должен отображать только этот путь, если только другой соответствующий путь не найден.
Шаг 2 — Переключение маршрутов
Для этого мы можем использовать компонент switch
, поставляемый с React Router, внутри Hash Router, как показано ниже.
import {Switch} from "react-router-dom"
<HashRouter>
<Switch>
<Route exact path="/login" component={LoginComponent}/>
<Route component={Temp404Component}/>
</Switch>
</HashRouter>
Когда этот коммутатор используется, он будет отображать только первый соответствующий маршрут, поэтому для допустимых маршрутов будет отображаться только соответствующий компонент, а для всех недопустимых маршрутов будет отображаться компонент 404.
Призыв к действию
- Аплодисменты. Поблагодарите и дайте другим найти эту статью.
- Комментарий. Поделитесь своим мнением об этой статье.
- Следуй за мной. Udith Gunaratna, чтобы получать новости о подобных статьях.
- Поддерживайте связь. LinkedIn, Твиттер
Первоначально опубликовано на http://www.udith.me 24 июня 2019 г.