Netlify 在页面刷新时呈现 404(使用 React 和 react-router)
Posted
技术标签:
【中文标题】Netlify 在页面刷新时呈现 404(使用 React 和 react-router)【英文标题】:Netlify renders 404 on page refresh (using React and react-router) 【发布时间】:2020-01-23 17:03:03 【问题描述】:我已经使用 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
【问题讨论】:
嗯,奇怪。也许您在 Netlify 设置中设置了错误 【参考方案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
文件夹对我来说效果更好,因为公用文件夹可以与我的代码一起推送。
【讨论】:
【参考方案2】:将netlify.toml
文件添加到你的项目根目录并粘贴以下代码:
[[redirects]]
from = "/*"
to = "/"
status = 200
推送并重新部署您的应用,就完成了。
【讨论】:
【参考方案3】:从您的公共文件夹中删除 _redirects
并将 netlify.toml
移动到您的 git 存储库的根目录 more info。还要从构建脚本中删除 && cp build/index.html build/404.html
- 你不再需要它了
【讨论】:
像魅力一样工作!实施您的解决方案后,我还可以使用我的自定义 404 页面。感谢您的帮助! 我在 netlify.toml 中添加了它,它可以工作![[redirects]] from = "/*" to = "/index.html" status = 200
【参考方案4】:
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'
【讨论】:
【参考方案5】:我遇到了类似的问题 所以我在公用文件夹中创建了 _redirects 文件并放入以下代码
/* /index.html 200
再次构建文件npm run build 并为我工作 resource for similar issue
【讨论】:
【参考方案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
【讨论】:
【参考方案7】:在根目录下创建_redirects 在 _redirects 文件中提及您的应用路由,例如: /家 /条款和条件
就是这样。
【讨论】:
能否在 _redirects 文件中添加如何提及应用路由? 在 Root 或 Public 文件夹中创建一个名为“_redirects”的文件并添加以下文本:/* /index.html 200
【参考方案8】:
试试这个
之前遇到过同样的问题,发现这是因为我用来连接后端服务器的代理。假设后端应用程序位于此 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"
]
【讨论】:
【参考方案9】:从您的 index.js 中,只需使用 HashRouter 包装您的组件,而不是之前的任何东西。 不要忘记从 react-router-dom 导入 HashRouter。
这很神奇。
【讨论】:
以上是关于Netlify 在页面刷新时呈现 404(使用 React 和 react-router)的主要内容,如果未能解决你的问题,请参考以下文章