Реактивный маршрутизатор выбрасывает 404 при обновлении страницы с приложением React, размещенным на GoDaddy - PullRequest
Новая
       106

Реактивный маршрутизатор выбрасывает 404 при обновлении страницы с приложением React, размещенным на GoDaddy

0 голосов
/ 18 октября 2019

Я развернул сайт React с помощью GoDaddy (http://normaned.com),, и у меня возникли проблемы с маршрутизацией react-router, не работающей при обновлении. Нажатие на ссылки работает, как и ожидалось, но если страница обновляется на странице 404Я использую BrowserRouter из react-router.

План хостинга GoDaddy - «Экономичный хостинг Windows с Plesk». К сожалению, я не тот, кто настроил службу хостинга, иЯ не уверен, смогу ли я перейти с Plesk на cPanel без дополнительных денежных затрат ... или же это был бы способ приблизиться к решению моей проблемы (т. Е. Windows против Linux-хостинга).

РЕДАКТИРОВАНИЕ 10/19: Теперь я понимаю, что сервер - это сервер Windows IIS, и мне нужен файл web.config (а не файл .htaccess). Хотя я все еще не уверен, какой код необходимо ввестиweb.config файл.

Вот мое репозиторий GitHub для веб-сайта: https://github.com/jenna-m/norman-ed

Я попробовал предложенные методы, которые я нашел в StackOverflow, GoDaddyсправочный форум, и в других местах, но он все еще не работает. Здесь арЯ попробовал кое-что:

https://stackoverflow.com/a/40591955/11995771

https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

Я попытался добавить следующее в .htaccess файл вкорневой каталог public_html: 

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

Я создал файл .htaccess непосредственно в Plesk, убедившись, что дополнительные символы не были добавлены (как предлагается в этой статье (https://www.godaddy.com/help/what-is-htaccess-2504)

* 1039)* Попытавшись немного решить проблему, я понял, что это может быть связано с тем, что я использую Plesk vs cPanel. Итак, я нашел эти потенциальные обходные пути:

https://support.plesk.com/hc/en-us/articles/115001697373-Website-with-configured-htaccess-is-not-working-404-Not-Found

https://support.plesk.com/hc/en-us/articles/115003015833-Redirection-rules-in-htaccess-file-do-not-work-in-Plesk

Я думал, что любое из этих решений будет работать, но они этого не сделали.

Я нашел этот пост в службе поддержки Plesk (https://support.plesk.com/hc/en-us/articles/115000063989-Does-Plesk-support-Apache-web-server-for-Windows-),, который привел меня к этой статье Microsoft (https://blogs.msdn.microsoft.com/azureossds/2015/04/23/converting-apache-htaccess-rules-to-iis-web-config-using-iis-manager-for-azure-websites/).

Ответы [ 2 ]

1 голос
/ 18 октября 2019

Если вы используете сервер Apache и проблема может заключаться в вашем файле .htaccess, при использовании маршрутизатора React маршруты, созданные или объявленные в React, не существуют на сервере, поэтому мы должны настроить запросы так, чтобыкаждый идет в index.html и показывает 404 в React, когда страница не найдена.

В соответствии с документацией create-response-app:

Если вывы используете Apache HTTP Server, вам нужно создать файл .htaccess в общей папке, который будет выглядеть следующим образом: 

   Options -MultiViews
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.html [QSA,L]

Ссылка на документацию create-реагировать на приложение:

https://create -react-app.dev / docs / deploy

Подробнее о создании страницы 404 в React можно узнать в роутере React: документация:

https://reacttraining.com/react-router/web/example/no-match

0 голосов
/ 19 октября 2019

Оказывается, я использовал сервер Windows IIS. Я новичок в мире веб-серверов и не знал, что я работаю с сервером IIS.

Получается, что мне нужен файл web.config, чтобы заставить работать мои перенаправления URL, а не.htaccess файл, который я пытался использовать изначально.

Это содержимое (найденное из этого StackOverflow ответа) моего web.config файла: 

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>
...