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时不起作用，但在解决刷新问题之前，我想先处理这个问题。

我正在使用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/

虽然这些方案是针对使用 React 的情况而非 Vue，但我仍尝试了这些方法：

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

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

- Jenna

---

嗯，奇怪。也许你在Netlify设置上设置错了什么。 - demkovych

Answer 1

这很简单并且对我有效。我在https://create-react-app.dev/docs/deployment#netlify找到了这个链接。

因此，如该链接所建议的那样，在/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的文件列表中，因此将_redirects添加到public文件夹中对我来说更好，因为可以将public文件夹与我的代码一起推送。

- manpikin

---

嗨，这确实帮助我在NETLIFY上部署我的静态网站，但是当我尝试在RENDER平台上做同样的事情时，这个技巧没有起作用。有什么想法可以解决在Render上部署静态网站时遇到的相同问题吗？ - humbleCodes

很高兴听到这个黑客技巧在使用Netlify时有所帮助。不幸的是，我没有使用Render平台的经验，也无法解释为什么这个黑客技巧不能起作用。 - manpikin

完全不需要担心，因为我已经想出了一种类似的解决方法，可以在渲染部署方面使用。在部署您的网站时，您只需调整设置。在设置中有一个重定向选项卡，只需像编辑 _redirects 文件一样进行编辑即可。 - humbleCodes

我使用了相同的解决方案来修复我的React-Router网站在Netlify上的问题，但现在Google搜索控制台正在列出其中一些页面并声明它们为“软404”，无法被Google索引。有人见过这种情况吗？这可能只是从我的旧网站进行的临时转换问题，但如果不是，我想尽快解决它。 - TimHayes

@TimHayes 我还没有遇到过这个问题。如果你找到了解决方法，能否告知我们呢？ - manpikin

Answer 2

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

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

推送并重新部署您的应用程序，一切就完成了。

- Muho

---

+1 通过URL直接访问我的React应用程序路由，例如/contact，Netlify会触发404错误。这个文件解决了这个问题。 - undefined

Answer 3

从您的公共文件夹中删除_redirects并将netlify.toml移动到您的Git存储库的根目录，更多信息。另外从构建脚本中删除&& cp build/index.html build/404.html - 您不再需要它了。

- nico

---

运行得非常好！在实施您的解决方案后，我也让我的自定义404页面工作了。感谢您的帮助！ - Jenna

我已经在netlify.toml文件中添加了以下内容，它可以正常工作！ [[redirects]] from = "/*" to = "/index.html" status = 200 - Hunter

你能解释一下为什么 _redirects 是错误答案吗？尽管它是被接受的答案并且有8倍的赞成票数。 - notacorn

@notacorn 没有人说 _redirects 是错误的答案。 - nico

好的，你说要删除它？ - notacorn

Answer 4

我也遇到了类似的问题，所以我在public文件夹中创建了_redirects文件，并添加了以下代码。

/* /index.html 200

重新构建文件，npm run build 对我起了作用， 类似问题的资源

- Om Fuke

Answer 5

如果您在使用Expo管理的工作流程中遇到了React Native Web的问题，此解决方案可以解决该问题：

1. 在项目的根目录中创建一个netlify.toml文件。 2. 在netlify.toml文件中添加以下代码：

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

3. 在终端中运行netlify deploy命令。

- ERA

Answer 6

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

/* /index.html 200

然后在Netlify中重新部署您的站点。

谢谢！

- Shihab

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

Answer 7

我在netlify中遇到了相同的刷新问题。对我来说，这是一系列的更改。之前我的react配置指向一个子文件夹（/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

- cdsaenz

Answer 8

2022年更新：

如果添加 _redirects 文件没有起作用（React JS）。

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

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

- Sachin Giri

Answer 9

对我来说，下面的解决方案有效。首先，在您的public文件夹中创建一个名为_redirects（没有扩展名，只是纯文本）的文件，并在其中键入 -> /* /index.html 200。然后在您的package.json文件中，在顶部设置属性{ homepage: "YOUR PUBLIC URL", ...rest of the properties }，并在index.html文件中添加<head>...<base href="YOUR PUBLIC URL">...</head>。从这篇博客文章中得到了答案，用户名为hrishikesh。

- danielyepesl

Answer 10

输入代码在这里使用HashRouter而不是BrowserRouter可以解决问题

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

- Toyib Mustapha