Netlify отображает 404 при обновлении страницы (с использованием React и response-router)

Это было просто, и у меня это сработало. Я нашел эту ссылку https://create-react-app.dev/docs/deployment#netlify

Поэтому, как подсказывает эта ссылка, я добавил файл _redirects в папку /public, например /public/_redirects. Затем я вставил /* /index.html 200 в файл _redirects. Я сделал все это в своем VS-коде, после чего переместил его на github, а затем, конечно же, мой netlify повторно развертывается автоматически каждый раз, когда я нажимаю на github. Моя проблема была решена, и обновление больше не приводит к ошибке 404.

В моем package.json раздел сборки выглядит так:

"scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
}

Примечание. В некоторых статьях говорится, что вам нужно добавить _redirects в папку build, но тогда папка сборки не входит в число тех, что помещаются в github в моем случае, поэтому добавление _redirects в папку public сработало лучше для меня, так как общая папка может быть отправлена ​​вместе с моим кодом.

Удалите _redirects из общей папки и переместите netlify.toml в корень репозитория git, подробнее < / а>. Также удалите из скрипта сборки && cp build/index.html build/404.html - это вам больше не нужно

Добавьте файл netlify.toml в корневой каталог вашего проекта и вставьте в него следующий код:

[[redirects]]
  from = "/*"
  to = "/"
  status = 200

нажмите и повторно разверните приложение, и готово.

enter code here Использование HashRouter вместо BrowserRouter решает проблему.

import { HashRouter as Router, Switch, Route } from 'react-router-dom'
//instead of 
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

У меня была такая же проблема с обновлением в netlify. Для меня это была серия изменений. Перед моей конфигурацией реакции я указывал на подпапку (/sandbox/appfolder) для использования в моей песочнице хостинга (надеюсь, я смогу вернуться к этому, изменив параметры ниже). Чтобы иметь возможность выполнять непрерывное развертывание в netlify, я сделал следующее, вдохновленное другими ответами. При использовании моей собственной песочницы хостинга у меня не было _redirects и домашней страницы, указывающих на подпапку.

РЕДАКТИРОВАТЬ: для запуска из подпапки моего сайта мне пришлось отредактировать .htaccess на RewriteRule ^ /sandbox/myapp/index.html [L] и package.json на "homepage": "/sandbox/myapp"

в /package.json:

"homepage": "/",

в /public/.htaccess

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Fallback all other routes to index.html    
RewriteRule ^ /index.html [L]

в моем основном компоненте src / App.js:

<BrowserRouter basename = {process.env.PUBLIC_URL}>

в общедоступном / index.html

<base href="%PUBLIC_URL%/">

и, наконец, как указано в / public / _redirects

/* /index.html 200

У меня была аналогичная проблема, поэтому я создал файл _redirects в общей папке и поместил следующий код

/* /index.html 200

построить файлы снова npm run build и работал у меня ресурс по аналогичной проблеме

создайте _redirects в корневом каталоге, упомяните маршруты вашего приложения в файле _redirects, например: / home / terms-and-condition

это оно.

попробуй это

ранее сталкивался с этой же проблемой, поскольку выяснилось, что это было из-за прокси, который я использовал для подключения к моему внутреннему серверу. Допустим, серверное приложение расположено по этому URL-адресу example.com. Поэтому вместо того, чтобы упоминать это как поле прокси в package.json, я бы предложил поместить ссылку только в ваши функции.

избегать этого

{
  "name": "frontend",
  "version": "0.1.0",
  "proxy": "https://example.com",
  "private": true,
....
....
}

Если вы используете redux, то введите свой серверный URL-адрес в действия с помощью axios или fetch. (Кроме того, попробуйте удалить файл package-lock.json, а затем разместите код без него на своем Github, а затем подключите его к netifly, а затем повторно разверните свой сайт)

Пример кода (обратите внимание на вызов API)

export const listArticles = () => async (dispatch, getState) => {
    try {
        dispatch({
            type: ARTICLES_LIST_REQUEST
        })

        // api call
        const { data } = await axios.get("https://example.com/api/articles/")

        dispatch({
            type: ARTICLES_LIST_SUCCESS,
            payload: data
        })

    } catch (error) {
        dispatch({
            type: ARTICLES_LIST_FAIL,
            payload: error.response && error.response.data.detail ? error.response.data.detail : error.message
        })
    }
}

Мой файл package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "mdbreact": "^5.0.2",
    "react": "^17.0.2",
    "react-bootstrap": "^1.5.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Из вашего index.js просто оберните свой компонент HashRouter вместо того, что было раньше. Не забудьте импортировать HashRouter из response-router-dom.

Это волшебно.