在hostinger等共享主机上部署react单页应用（spa）时，用户刷新页面或直接访问深层路由可能遇到404错误。这并非react router本身的问题，而是服务器未能正确处理客户端路由。核心解决方案是配置服务器端的url重写规则（例如，apache服务器通过`.htaccess`文件），将所有非文件或非目录的请求重定向到应用的`index.html`文件，从而让react router接管路由处理。
理解单页应用路由与服务器路由的冲突
React等前端框架构建的单页应用（SPA）采用客户端路由机制。这意味着当用户在应用内部导航时，URL的变化由JavaScript在浏览器端处理，页面内容动态更新，而不会向服务器发起新的页面请求。例如，当从/导航到/about-us时，浏览器并不会请求/about-us.html，而是React Router在客户端渲染对应的组件。
然而，当用户直接在浏览器地址栏输入如yourdomain.com/about-us并回车，或者在/about-us页面刷新时，浏览器会向服务器发起一个针对/about-us路径的全新请求。对于传统的Web服务器（如Apache或Nginx），如果它在文件系统中找不到名为about-us的文件或目录，就会返回一个标准的404 Not Found错误。这就是问题产生的原因：服务器不知道如何处理这些客户端定义的路由。
React Router（包括BrowserRouter和Routes）在客户端运行良好，但它无法干预服务器接收到的初始请求。因此，解决这个问题的关键在于配置服务器，使其将所有指向不存在文件或目录的请求都重定向到应用的入口文件，通常是index.html。
解决方案：配置服务器URL重写规则
对于大多数共享主机环境，尤其是那些使用Apache服务器的，可以通过在项目的根目录（通常是public文件夹，即部署后包含index.html的目录）中添加或修改.htaccess文件来实现URL重写。
以下是针对Apache服务器的.htaccess配置示例：
RewriteEngine On RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L]
.htaccess 文件内容解析
: 这是一个条件块，确保只有在Apache服务器启用了mod_rewrite模块时，内部的规则才会被应用。这是为了避免在不支持该模块的环境中引起服务器错误。RewriteEngine On: 开启URL重写引擎。这是使用mod_rewrite规则的前提。RewriteBase /: 定义重写规则的基础URL路径。在这里，/表示网站的根目录。RewriteRule ^index.html$ – [L]: 这条规则的作用是，如果请求的路径就是index.html，则不进行任何重写，直接提供该文件。-表示不替换，[L]（Last）标志表示如果此规则匹配，则停止处理后续的重写规则。这避免了将index.html重写到自身，造成循环。RewriteCond %{REQUEST_FILENAME} !-f: 这是一个条件指令。RewriteCond用于定义一个或多个条件，只有当所有条件都满足时，紧随其后的RewriteRule才会执行。%{REQUEST_FILENAME}：表示当前请求的文件路径。!-f：表示该路径不是一个实际存在的文件。RewriteCond %{REQUEST_FILENAME} !-d: 另一个条件指令。!-d：表示该路径不是一个实际存在的目录。RewriteCond %{REQUEST_FILENAME} !-l: 进一步的条件指令。!-l：表示该路径不是一个符号链接。这三个RewriteCond指令共同确保了只有当请求的URL不对应任何实际存在的文件、目录或符号链接时，才会执行后续的重写规则。RewriteRule . /index.html [L]: 这是核心的重写规则。.：匹配任何字符（除了换行符），在这里表示匹配任何URL路径。/index.html：将匹配到的URL重写到/index.html。[L]：Last标志，表示一旦此规则匹配并执行，就停止处理后续的重写规则。
通过这些规则，当用户请求一个如/about-us的路径，而服务器又找不到对应的文件或目录时，请求会被内部重定向到index.html。浏览器加载index.html后，React应用启动，React Router会解析URL中的/about-us路径，并渲染相应的组件，从而避免了404错误。
部署与注意事项
文件位置：将上述.htaccess文件放置在您React应用的构建输出目录的根部。例如，如果您使用npm run build生成build文件夹，那么.htaccess文件应该位于部署到服务器上的build文件夹内。在Hostinger这类主机上，这通常意味着将其放在您的域名指向的public_html或子目录的根部。验证mod_rewrite：确保您的主机环境支持并启用了Apache的mod_rewrite模块。大多数共享主机默认会启用，但如果问题依旧，可以联系您的主机提供商进行确认。其他服务器：Nginx：如果您的主机使用Nginx，您需要在Nginx配置文件中添加类似的try_files指令，例如：
location / { try_files $uri $uri/ /index.html;}
Node.js/Express：如果您是自己搭建的Node.js服务器，可以使用express.static中间件，并配置一个通配符路由：
app.use(express.static(path.join(__dirname, 'build')));app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html'));});
特定部署平台：Vercel、Netlify、GitHub Pages等现代部署平台通常会自动处理SPA路由问题，无需手动配置.htaccess或Nginx规则。
总结
React单页应用在共享主机上遇到404错误，尤其是在刷新或直接访问深层路由时，是一个常见的部署挑战。这本质上是客户端路由与服务器文件系统查找机制之间的不匹配。通过在服务器端配置URL重写规则，将所有非文件/非目录的请求导向应用的入口index.html文件，可以有效地解决这个问题。对于Apache服务器，这意味着在部署目录中添加一个配置正确的.htaccess文件，确保React Router能够接管后续的路由处理。理解并正确实施这些服务器配置是成功部署React SPA的关键一步。
以上就是解决React应用在共享主机上刷新或直接访问时出现404错误的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529608.html
微信扫一扫 
支付宝扫一扫 
