Код состояния: 404 на реальном сервере, 200 на локальном хосте

Question

У меня странная ошибка .. Мое приложение работает нормально, единственная странность заключается в том, что я получаю сообщение об ошибке 404 в моей сетевой консоли всякий раз, когда я не на главной странице (мой контент все еще загружается, и мое приложение работает отлично, но я просто получаю это сообщение). из-за этого, когда я, например, помещаю свою ссылку в powerpoint, и кто-то нажимает на нее, она не будет работать.

У меня нет этой ошибки на моем локальном хосте.

Живой сервер

Localhost

на localhost

Я использую react-router-dom для обработки моих маршрутов. вот мой код:

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

const App = () => {

    const search_slug_options = [
        `/${search}/${page}=:page?/:id?`,
        `/${search}/:value_1?/:value_2?/${page}=:page?/:id?`,
        `/${search}/:value_1?/${page}=:page?/:id?`,
        `/${search}/:value_2?/${page}=:page?/:id?`,

        `/${search}/:value_1?/:value_2?/:id?`,
        `/${search}/:value_1?/:id?`,
        `/${search}/:value_2?/:id?`
    ]


    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/:keyboard?" render={(props) => <SomeComponent {...props} />} />
                {search_slug_options.map((path, index) => <Route key={index} path={path} render={(props) => <SomeComponent {...props} />} />)}
                <Route path="/user/:id/:name/:mod?" render={(props) => <SomeComponent {...props} />} />
                <Route path="/user/:id/:name?" render={(props) => <SomeComponent {...props} />} />
                <Route exact path="/privacy/policy" render={(props) => <SomeComponent {...props} />} />
                <Route path="/:id?/:value?" render={(props) => <SomeComponent {...props} />} />
                <Route path="*" render={(props) => <NotFound {...props} />} />
            </Switch>
        </BrowserRouter>
    );
}

export default App;

Понятия не имею, может ли кто-нибудь помочь?

EDIT:

Итак, я Я использую AWS ampify, и я попробовал @vishnu Singh его ответ. Это дало мне пустую страницу, я вернул ее к прежним настройкам (404 перезапись).

Теперь, когда я обновляю sh свою страницу, загружается только мой HTML файл.

Когда я обновляю sh страницу, загружаются файлы HTML, CSS и JS, и webApp работает отлично

Также, как ни странно, у меня есть 2 домена, связанных с этим webApp, только у одного из них есть эта проблема

Answer 1

Если вы используете nginx, добавьте следующую конфигурацию в файл конфигурации вашего сервера.

location / {
  try_files $uri /index.html;
}

На самом деле, любой маршрут, начинающийся с /, отправит файл index.html. Таким образом, практически любой маршрут, такой как /user или /user/1/john-doe, все они будут получать один и тот же файл index.html с сервера nginx.

После получения файла index.html в браузере react-router проанализирует URL-адрес и загрузит соответствующий компонент, как вы указали в своем приложении для реагирования.

Такая же функциональность может быть достигнута с сервером express.js с помощью следующего фрагмента:

const express = require('express')
const app = express()
const port = 3000

// assuming your source code is in '<project root>/public' directory
app.use('/', express.static('public'))

app.listen(port, () => console.log("Server started"))

. можете проверить express. js официальную документацию

Изменить:

Как вы используете aws-amplify. Следующее решение может сработать:

1. Войдите в консоль aws.
2. Go на AWS Услугу Amplify.
3. Выберите Перезаписывает и перенаправляет настройки на левой панели навигации.
4. Затем нажмите Добавить правило .
5. Установить исходный URI как: /<*>
6. Установить цель URI как: /index.html (при условии, что index.html помещается в root)
7. Задайте тип как: 200 (Rewrite)
8. Нажмите Сохранить .

Image credits: AWS amplify страница документации .