Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.
Создайте пользовательскую страницу 404, используя простой маршрут React, чтобы предоставить вашим посетителям полезный опыт, когда они больше всего в этом нуждаются.
Рано или поздно пользователь посетит URL-адрес, которого нет на вашем сайте. Что пользователь делает после этого, зависит от вас.
Они могут нажать кнопку «Назад» и покинуть ваш сайт. Вместо этого вы можете предоставить полезную страницу 404, чтобы помочь им продолжить переход на ваш сайт.
Для веб-сайтов React вы можете использовать маршрутизатор React для создания полезной страницы 404 not found.
Создание страницы 404
ошибка 404 возникает, когда вы пытаетесь посетить страницу веб-сайта, которую сервер не может найти. Как разработчик, обработка ошибок 404 означает создание страницы, которую сервер использует в качестве замены, когда он не может найти запрошенную страницу.
В React вы делаете это, создавая ненайденный компонент, который будет отображаться на несуществующих маршрутах.
В этой статье предполагается, что у вас уже есть работающее приложение React с настроенной маршрутизацией. Если нет, создать React-приложение а затем установить Реактивный маршрутизатор.
Создайте новый файл с именем NotFound.js и добавьте следующий код для создания страницы 404.
Импортировать { Связь } от "реагировать-роутер-дом";
экспортпо умолчаниюфункцияНе найдено() {
возвращаться (
<див>
<h1>Ой! Кажется, ты потерялся.</h1>
<п>Вот несколько полезных ссылок:</п>
<Ссылка на ='/'>Дом</Link>
<Ссылка на ='/blog'>Блог</Link>
<Ссылка на ='/contact'>Контакт</Link>
</div>
)
}
Эта страница 404 отображает сообщение и ссылки для перенаправления пользователя на общие страницы веб-сайта.
Маршрутизация на страницу 404
Вы можете создать обычный маршрут с помощью маршрутизатора React следующим образом:
Импортировать { Маршрут, маршруты } от "реагировать-роутер-дом";
функцияПриложение() {
возвращаться (
<Маршруты>
<Путь маршрута="/" элемент={ <Дом/> }/>
</Routes>
)
}
Вы указываете URL-адрес и элемент, который хотите отобразить по этому маршруту.
Страница 404 отображается для путей, которых нет на сайте. Итак, вместо указания пути используйте звездочку (*).
<Путь маршрута='*' элемент={<Не найдено />}/>
С использованием * отображает компонент NotFound для всех URL-адресов, не указанных в маршрутах.
Маршрутизация в React
Вы можете легко создать страницу 404 для всех URL-адресов, которые не существуют в вашем веб-приложении React, с помощью маршрутизатора.
В браузерах есть страница 404 по умолчанию, но создание пользовательской страницы позволяет вам сообщить пользователям, что пошло не так, и как они могут это исправить. Вы также можете создать страницу 404, которая соответствует вашему бренду.