Netlify在页面刷新时呈现404(使用REACT和REACT-RUTER) [英] Netlify renders 404 on page refresh (using React and react-router)

问题描述

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

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

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

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

另外，我的自定义404页不能像我在localhost:3000时那样工作，但我希望在处理我的自定义404组件之前先解决此刷新问题。

我使用的是Reaction和Reaction-Router，我知道由于我使用的是Reaction-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，没有反应，但我还是尝试了这些解决方案：

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

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

推荐答案

这很简单，对我有效。我找到此链接https://create-react-app.dev/docs/deployment#netlify

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

在我的Package.json中，Build部分如下所示；

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

注意： 有些文章说您需要在build文件夹中添加_redirects，但在我的例子中，Build文件夹不在推送到GitHub的文件夹中，所以这就是为什么将_redirects添加到public文件夹对我更有效，因为可以将公用文件夹与我的代码一起推送。

这篇关于Netlify在页面刷新时呈现404(使用REACT和REACT-RUTER)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！