Netlify 在页面刷新时呈现 404（使用 React 和 react-router）

Question

我已经使用 Netlify 部署了我的网站，但我在路由方面遇到了问题。

这是我的网站：https://redux-co.netlify.com/

还有我的 GitHub 回购：https://github.com/jenna-m/redux-co

具体来说，如果用户导航到主页以外的任何页面并刷新页面，默认的 Netlify 404 会呈现。从 404 页面，如果我导航回主页并刷新，则会呈现主页。

此外，我的自定义 404 页面无法像我在 localhost:3000 时那样工作，但我想在处理我的自定义 404 组件之前先解决这个刷新问题。

我正在使用 React 和 react-router，我知道由于我正在使用 react-router，我的网站不会立即部署。

这是我的 _redirects 文件，与我的 index.html 文件位于 /public 文件夹中：

/*    /index.html   200

这是我的 “build” 位于 package.json:

…
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && cp build/index.html build/404.html",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
…

我读到过其他人遇到过这种情况以及他们为克服该问题所做的工作。这是我到目前为止所引用的…

https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/

https://hugogiraudel.com/2017/05/13/using-create-react-app-on-netlify/

此人使用的是 Vue 而不是 React，但我还是尝试了这些解决方案：

https://github.com/vuejs/vuepress/issues/457#issuecomment-390206649

https://github.com/vuejs/vuepress/issues/457#issuecomment-463745656

Answer 1

从您的 public 文件夹中删除 _redirects，并将 netlify.toml 移至您的 git 存储库 more info 的根目录。同时从构建脚本中删除 && cp build/index.html build/404.html - 你不再需要它了

Answer 2

这很简单而且对我有用。我找到了这个 link https://create-react-app.dev/docs/deployment#netlify

因此，按照 link 的建议，我在 /public 文件夹中添加了一个 _redirects 文件，例如 /public/_redirects。然后我将 /* /index.html 200 粘贴到 _redirects 文件中。我在我的 VS Code 中完成了所有这些，之后我推送到 github，当然每次我推送到 github 时我的 netlify 都会自动重新部署。我的问题已解决，刷新不再带来 404 错误。

在我的 package.json 中，构建部分如下所示；

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

注：有些文章说您需要在 build 文件夹中添加 _redirects，但是构建文件夹不在我的例子中被推送到 github 的文件夹中，所以这就是添加 [=11= 的原因] 到 public 文件夹对我来说效果更好，因为 public 文件夹可以与我的代码一起推送。

Answer 3

从您的 index.js 中，只需使用 HashRouter 包装您的组件，而不是之前的任何组件。不要忘记从 react-router-dom.

导入 HashRouter

这很神奇。

Answer 4

将netlify.toml文件添加到项目的根目录，并在其中粘贴以下代码：

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

推送并重新部署您的应用，大功告成。

Answer 5

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'

Answer 6

我在 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}>

在 public/index.html

<base href="%PUBLIC_URL%/">

最后如/public/_redirects

所述

/* /index.html 200

Answer 7

我遇到了类似的问题所以我在 public 文件夹中创建了 _redirects 文件并放入以下代码

/* /index.html 200

再次构建文件npm 运行构建 为我工作 resource for similar issue

Answer 8

在根目录下创建_redirects 在 _redirects 文件中提及您的应用程序路由，例如： /家 /条款和条件

就是这样。

Answer 9

试试这个

之前遇到过同样的问题，发现这是因为我使用代理连接到我的后端服务器。假设后端应用程序位于此 URL example.com。因此，与其将此作为 package.json 中的代理字段提及，我建议仅将 link 放在您的函数中。

避免这种情况

{
  "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"
    ]
  }
}

Answer 10

2022 年更新：

If adding _redirects file did not work for me.(React JS)

对我来说，解决方案是在我的 React 项目的基目录中创建 netlify.toml 文件。然后添加以下内容。

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

Answer 11

对我来说是下一个解决方案。首先在 public 文件夹中创建一个名为 _redirects 的文件（没有扩展名，只有纯文本）并输入 -> /* /index.html 200 在里面。然后在 package.json 文件中将属性 { homepage: "YOUR PUBLIC URL", ...rest of the properties } 和 index.html 文件添加 <head>...<base href="YOUR PUBLIC URL">...</head>。从 this blog post 得到答案，用户叫 hrishikesh。

Answer 12

在我的例子中，我添加了 _redirects 文件，但没有用。我再次使用我的 CI 设置，在我的构建命令中我写了 CI = npm run build 但后来在 Public 目录字段中我写了 build 然后触发了重新部署，我的网站终于成功了！

Answer 13

我尝试了 _redirects 文件和 netlify.toml 更新，但仍然收到 404。对我来说，修复是在 netlify.com 上更新 Build Settings。我认为将 Publish Directory 更改为 ./build 是解决方法：

顺便说一下，我遵循了 stack/elsewhere 上的一些建议，在我的 index.html 文件中添加了一个标签，并更新了我的 package.json 中的 homepage。这些都没有帮助，也可能搞砸了我的获取请求。（以防其他人遇到类似问题）

Answer 14

如果您运行解决 React Native Web 的这个问题，使用 Expo-managed 工作流程，此解决方案解决了问题：

在项目根目录下创建netlify.toml
在netlify.toml文件中添加如下代码：

    [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

运行终端中的 netlify deploy 命令。

Answer 15

这是我的 _redirects 文件，与我的 index.html 文件位于 /public 文件夹中：

_redirects in

/* /index.html 200

然后 re-deploy 您在 Netlify 中的站点。

谢谢！

Netlify 在页面刷新时呈现 404（使用 React 和 react-router）

Netlify renders 404 on page refresh (using React and react-router)

http-status-code-404

reactjs

react-router

netlify

试试这个

避免这种情况

示例代码（通知api调用）