刷新 react js 项目时出现 404 错误答案

【问题标题】：While refreshing the react js project it gives 404 error刷新 react js 项目时出现 404 错误
【发布时间】：2022-10-31 15:23:12
【问题描述】：

我创建了一个基于 React JS 的项目并将文件上传到服务器，但是当我导航到另一个链接选项卡（如 https://localhost:3000/about）并刷新页面时，它会给出 404 错误。我该如何解决这个问题？

【问题讨论】：

localhost/about 似乎不是一个有效的网址。可能有一个像localhost:3000/about 这样的端口
我只是给出 /about 之类的路径
@nullptr 注意到 m 作为最后一个字符，并“将文件上传到服务器”。这被部署到生产服务器

标签： javascript reactjs

【解决方案1】：

这似乎是因为您正在使用库进行客户端路由（最流行的是react-router-dom）。这在您从根页面开始时有效，但由于您已经部署在静态服务器上，如果您要在 / 以外的任何其他路径上重新加载，您将得到 404。要解决此问题，您有几个选择：

使用HashRouter
获取更复杂的服务器，该服务器在文件未完成的任何 GET 请求上返回 index.html 而不是 404
升级到处理路由的全栈 React-based 框架，如 NextJS、Gatsby、Remix 等。

【讨论】：

【解决方案2】：

当您构建反应应用程序并将文件呈现为静态文件时会出现此错误
你需要像这样创建渲染路由返回反应文件：

//expressjs
    app.get("*",(req,res)=>{
    
    retrun YourReactProjectIndexFile()
    
    })

【讨论】：

我必须在反应 js 中这样做
你不能，你从服务器发送文件你需要输入 func 来返回任何请求的反应文件

【解决方案3】：

每当我刷新页面时，我都会收到 404。所以我所做的是...

如果你已经构建了你的 React JS 应用程序

yarn build
OR 
npm run build

并托管在 Apache 服务器上。然后您可以在应用程序的根目录上添加 htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

如果您使用的不是 apache，请参考此链接，它可能会有所帮助

https://tecadmin.net/solving-react-404-error/

我希望这可能对将来的某人有所帮助。

【讨论】：