Блог

Главная - Вопросы по программированию - Ошибка реакции Запрошенный URL-адрес не был найден на этом сервере при обновлении

Ошибка реакции Запрошенный URL-адрес не был найден на этом сервере при обновлении

#html #reactjs

Вопрос:

Мое приложение React отлично работает локально, но когда я его развертываю, маршрутизация работает не так, как должна. Когда я нажимаю на кнопки панели навигации, все работает отлично, но когда я пытаюсь обновить или написать маршруты вручную, я получаю сообщение «запрошенный URL-адрес не найден на этом сервере». В нем также говорится: «Кроме того, при попытке использовать документ ErrorDocument для обработки запроса была обнаружена ошибка 404»., даже если у меня есть файл .htaccess.

вот мой код :

-вот одна из кнопок на панели навигации :

 <Link to="/contact">
        <button>
          <FadeIn delay={200}>CONTACT</FadeIn>
        </button>
      </Link>

-вот файл App.tsx, который включает в себя маршрутизацию :

 import {BrowserRouter as Router, Route, Switch} from "react-router-dom"; 

function App() {
 return (
<Router>
    <Header />
    <Switch>
      <Route exact path = "/" component={Carusel}/>
      <Route exact path = "/contact" component={Contact}/>
    </Switch>
    <Footer />
</Router>

);
}

Ответ №1:

Пожалуйста, обновите свой файл .htaccess следующим кодом и попробуйте.

 <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>

Ответ №2:

Похоже , что ваш сервер не обрабатывает никаких маршрутов, за исключением "/" , что нормально, когда вы маршрутизируете на стороне клиента, но выполнение запроса к GET "/contact" завершится неудачей.

Например, приложение React при загрузке в качестве корзины AWS S3 в конфигурации веб-сайта потребует, чтобы вы установили документ об ошибке. Вы можете установить этот документ об ошибке в качестве своего index.html, таким образом, 404 будет обрабатываться вашим внешним приложением, которое знает, как обрабатывать маршрут.

Вот пример, в котором для документа об ошибке установлено значение index.html https://andela.com/insights/how-to-deploy-your-react-app-to-aws-s3/

Метки: