我的网站(基于React.js) aritraroy.live托管在Netlify上。现在,我正在尝试为我的网站添加一个自定义的404页面,因为netlify的默认404页面一点也不令人满意。我跟踪了Rajan Tiwari (https://blog.kiprosh.com/show-custom-404-error-page-for-netlify-applications/)的一篇文章,Netlify文档和一些StackOverflow问题(Netlify在页面刷新中呈现404 (使用React和react路由器))。
现在,任何断开的链接都会重定向到我的自定义404页面。(运行代码片段)。
<div style="width:70%;height:0;padding-bottom:51%;position:relative;"><iframe src="https://giphy.com/embed/4QXdTODkeYx3Rq3Kt0" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
我还添加了相关文件的屏幕截图:
路由段

自定义404组件

netlify.toml

404.html

我还没有找到任何可行的解决办法。如果有人能在这个问题上帮我,那会很有帮助的。提前谢谢。
发布于 2022-07-05 07:25:07
我在本文- https://kittygiraudel.com/2017/05/13/using-create-react-app-on-netlify/的帮助下解决了这个问题。
主要问题:
在构建客户端React应用程序时,路由通常是使用Reactive路由器来处理的。在尝试加载/刷新路径不是/的页面之前,一切都很有魅力。然后,你撞到了404墙。这只是一页空白,真的。
解决方案:
我将我的netlify.toml和404.html文件保存在根文件夹中,并在package.json文件中修改了构建命令,如下所示:
{
"build": "react-scripts build && cp build/index.html build/404.html"
}现在,在运行build命令并在Netlify中部署之后,任何断开的链接都将重定向到我的自定义404页面。
发布于 2022-07-05 05:11:15
以下步骤将对您有所帮助:
route部分中,将代码从<Route path={"404_error"} element={<PageNotFound />} />更改为<Route path={"*"} element={<PageNotFound />} />netlify.toml中,粘贴以下代码:
[重定向]从= "/*“到= "/index.html”状态= 200404.html页面https://stackoverflow.com/questions/72863867
复制相似问题