Как сделать страницу 404 react
Обновлено: 08.07.2024
Я создал компонент NotFound , и он отлично работает, когда я перехожу на несуществующую страницу. Но та же самая страница появляется на всех моих страницах, а не только на той, которой нет. Это и есть компонент:
И вот как я использовал его на главной странице:
3 ответа
Привет У меня есть приложение express, работающее как сервер REST, что означает, что все маршруты /api/xx обрабатываются в express. У меня также есть приложение react (обслуживаемое express при доступе к / ) в качестве клиента, у которого также есть маршрутизатор, проблема возникает, когда я.
В настоящее время я испытываю некоторые проблемы, связанные с react router отображением 404 не найденных страниц. Это код, который у меня есть до сих пор: .
Попробуй вот это:
Все приведенные ниже примеры прекрасно работают:
Похожие вопросы:
У меня есть пользовательская страница ошибки 404 на моем apache (404.php), и она работает нормально, но если кто-то или какая-либо поисковая система запрашивает страницу /404.php , сервер возвращает.
Поэтому я пытаюсь добавить пользовательскую страницу ошибок в свой файл .htaccess. Файл .htaccess находится в корне веб-сайта. Это единственный способ, которым он, кажется, работает в подкаталогах.
Привет У меня есть приложение express, работающее как сервер REST, что означает, что все маршруты /api/xx обрабатываются в express. У меня также есть приложение react (обслуживаемое express при.
В настоящее время я испытываю некоторые проблемы, связанные с react router отображением 404 не найденных страниц. Это код, который у меня есть до сих пор: .
У меня есть компонент, который принимает аналогичные реквизиты к стандартному react-router Route и возвращает маршрут. Этот возвращаемый маршрут имеет опору рендеринга, которая просто проходит через.
Я создаю приложение React JS с помощью react-router v5. Я уже настроил страницу 404, и она хорошо работает. Как вы можете видеть, в консоли я получаю код ответа, мне просто нужно понять, как.
Не теряя времени, создадим Django-проект. Откройте консоль и напишите эти команды:
Затем создайте Django-проект:
Запустите сервер со своим веб-приложением:
Вы видите эту ошибку, потому что в вашем файле настроек Django установлено значение DEBUG = True. Измените это значение на False, и Django отобразит стандартную страницу 404.
Давайте сделаем то, что написано в отчёте об ошибке 404: отключим режим отладки Django, изменив значение константы DEBUG в файле настроек проекта settings.py , кроме этого, указываем адрес локального сервера в списке разрешенных адресов:
Замечание! Когда вы будете располагать своё веб-приложение на хостинге для доступа к нему настоящих пользователей, вам понадобится снова изменить константу ALLOWED_HOSTS : указать приобретенный домен в качестве элемента списка.
Это и есть та самая страница, которую мы сейчас настроим с помощью собственного пользовательского шаблона.
Создаём файл представлений views.py в папке mysite с помощью данной команды:
Ваш Django-проект теперь должен выглядеть примерно так:
Теперь пришло время добавить функцию-представление, которая будет обрабатывать ошибку 404. В файл mysite/views.py добавьте следующие строчки кода:
Также необходимо в файле urls.py директории Django-проекта mysite определить значение переменной handler404 :
В итоге файл mysite/urls.py должен выглядеть следующим образом:
Теперь необходимо указать Django, где именно находится ваша папка templates , поэтому в файле settings.py , в константе TEMPLATES следует обозначить значение ключа ‘DIRS’ следующим образом:
Перед тем, как переключиться на вкладку браузера для проверки только что созданного шаблона — убедитесь, что структура вашего проекта выглядит вот так:
После проверки структуры проекта — перейдите по любому из несуществующих путей вашего сайта: пользовательский HTML-шаблон 404.html обработает их все!
Поздравляем — всё готово! Ваша собственноручно созданная страница 404 Page Not Found теперь используется каждый раз, когда пользователь обращается к несуществующему ресурсу.
Все знают, как обидно вместо желаемой страницы получить ошибку 404. Многие разработчики наполняют Not Found страницу более полезной информацией, или, по крайней мере, пытаются повеселить несчастного заблудившегося пользователя, иногда удивляя своей креативностью.
Сегодня, ко дню вебмастера, мы подготовили подборку интересных четырестачетвертых страниц.
На этом сайте можно найти интерфейс Commodore 64.
Похоже, вам не стоило сюда заходить.
Студия дизайна делится забавными гифками про собак.
А эта страничка ушла в поход… и не вернулась.
Очень атмосферная интерактивная 404-ая страница.
Веб-страница ищет HTML своей жизни. Желательно без ошибок и вредных привычек.
Классический мем на сайте 9GAG.
Красивая иллюстрация броуновского движения от Hot Dot.
А этой страницы на сайте Mikandi нет, как и одежды у этой прекрасной леди.
Вам попалась страница 404? Решайте, кого уволить за такое свинство.
Синий экран смерти от Willismonds.
А эту страницу съели пациенты клиники. Очень сожалеем 🙁
Дыра в интернете на сайте CSS Tricks.
Поздравляем. Вы сломали наш сайт.
Некоторые сайты предлагают целую блок-схему действий для тех, кто попал на 404.
Airbnb при переходе на сломанную ссылку порадует вас анимацией девочки с упавшим мороженным, а также предложит некоторые полезные ссылки.
Ниже представлен скриншот страницы 404 известного сокращателя ссылок. На нём изображена мутировавшая рыба-шар, вглядывающаяся в дно водоёма, у которой ещё и чайка над душой висит. Всё это представлено в виде анимации.
Популярный сайт обмена картинками imgur сделал страницу 404 в виде стены с картинами в академическом стиле, но только с животными, из которых готов к беседе с вами только жираф.
Всё минималистично и главное — ссылка на релевантный материал.
Сайт HatchedLondon решил сделать страницу 404 очень длинной, но до конца можно дойти всего за одну секунду. При этом страница хорошо вписывается и смотрится отлично.
Вот про экран с ошибкой от GitHub вы точно знаете, а как насчёт не менее известного Docker? Расстроенный кит смотрит на утонувший корабль, параллельно размышляя о ваших проектах.
Инструмент для проектировки интерфейсов отлично справился и с собственным. Можно поиграться с узлами на странице ошибки, но не более. Со шрифтами поиграть не получится.
Создатель блога с душой подошел к делу и сделал красивую и анимированную страницу 404, почти полностью написанную на CSS (картинки, конечно же, были в png). Он даже исходным кодом поделился. При входе на страницу меню разваливается и крутится в чёрной дыре, при этом оставаясь кликабельным.
Сайт, специализирующийся на продаже векторных иконок, не забыл и про себя, подобрав именно ту, которая гармонично сочетается с тематикой ресурса.
Интересная реализация ошибки 404 в блоге любителя иконок. Пользователь, вероятно, находится в машине, к нему приближается светящееся число 404 и в это же время пробегает ящерица по лобовому стеклу (вообще тут всё зависит от вашей фантазии).
Один из наиболее популярных сервисов общения между членами одной компании тоже вошёл в эту подборку. Ребята хорошо потрудились над созданием интересной и анимированной страницы ошибки 404 с небольшими элементами интерактивности (можно трогать кур и свинок). Также во время отсутствия активности на странице всё становится серым.
Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.
Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.
Используйте React в том объёме, в котором вам хочется.
Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.
Добавляем React за одну минуту
В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML-файл.
Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.
Шаг 1: Добавляем DOM-контейнер в HTML
Для начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег
Затем назначьте созданному
уникальный атрибут id . Это позволит впоследствии найти тег из JavaScript-кода и отобразить React-компоненты внутри него.
можно поместить где угодно внутри тега . Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.
Читайте также: