当reactjs单页应用（spa）部署到共享主机（如hostinger）时，用户在刷新页面或直接通过url访问非根路径时常会遇到404错误。这并非react路由本身的问题，而是由于服务器未能正确处理客户端路由导致的。本文将详细介绍如何通过配置`.htaccess`文件，实现url重写，从而解决这一常见的部署问题，确保所有路由请求都能正确指向应用的`index.html`。
问题根源：React单页应用与服务器路由的冲突
React应用通常使用客户端路由库（如React Router Dom）来管理页面导航。这意味着当用户在应用内部点击链接时，URL会发生变化，但浏览器并不会向服务器发送新的请求，而是由JavaScript代码在客户端渲染相应的组件。
然而，当用户执行以下操作时，问题就出现了：
直接在浏览器地址栏输入应用的某个非根路径（例如 yourdomain.com/about-us）。刷新一个非根路径的页面。通过外部链接（如书签或搜索引擎结果）访问应用的某个非根路径。
在这种情况下，浏览器会向服务器发送一个针对该完整路径的请求。对于一个传统的静态文件服务器而言，它会尝试在文件系统中查找与该路径匹配的物理文件或目录。由于React应用的所有路由都是在index.html中通过JavaScript动态生成的，服务器通常找不到对应的物理资源，从而返回404 Not Found错误。
解决方案：配置服务器URL重写
解决此问题的核心在于告知服务器，对于任何不指向实际文件或目录的请求，都应该将其重写并指向应用的入口文件index.html。这样，index.html加载后，其中的React应用会接管路由，并根据URL路径渲染正确的组件。
对于使用Apache服务器的共享主机环境（Hostinger通常采用Apache），我们可以通过配置.htaccess文件来实现URL重写。
.htaccess配置详解
请在您的React项目构建输出目录（通常是build或public文件夹的根目录）中创建一个名为.htaccess的文件，并添加以下内容：
RewriteEngine On RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L]
下面是对这段配置的详细解释：
: 这是一个条件语句，确保只有在Apache服务器启用了mod_rewrite模块时，内部的重写规则才会生效。这是良好的实践，可以避免在模块未启用时导致服务器错误。RewriteEngine On: 这一行是启用Apache的重写引擎的关键指令。没有它，任何重写规则都不会被处理。RewriteBase /: 定义了重写规则的基础URL路径。在这里，/表示网站的根目录。如果您的应用部署在子目录中（例如 yourdomain.com/my-app/），则需要将此值更改为 /my-app/。RewriteRule ^index.html$ – [L]: 这条规则的作用是，如果请求的URL是index.html本身，则不做任何重写（-表示不替换），并停止处理后续的重写规则（[L]表示Last，即最后一条规则）。这可以防止index.html被自身重写，导致循环或不必要的处理。RewriteCond %{REQUEST_FILENAME} !-f: 这是一个重写条件。它检查当前请求的文件名是否不是一个实际存在的文件。!-f表示“如果不是一个文件”。RewriteCond %{REQUEST_FILENAME} !-d: 另一个重写条件。它检查当前请求的文件名是否不是一个实际存在的目录。!-d表示“如果不是一个目录”。RewriteCond %{REQUEST_FILENAME} !-l: 检查当前请求的文件名是否不是一个符号链接。!-l表示“如果不是一个符号链接”。这三条RewriteCond结合起来，意味着只有当请求的URI不对应服务器上任何实际的文件、目录或符号链接时，才会执行后续的RewriteRule。RewriteRule . /index.html [L]: 这是最终的重写规则。.：匹配任何字符（除了换行符），意味着它会匹配任何请求路径。/index.html：将匹配到的请求路径重写为/index.html。[L]：表示这是最后一条规则，停止处理后续的重写规则。
这条规则的整体含义是：如果请求的URI不是一个真实存在的文件、目录或符号链接，那么就将这个请求重定向到index.html。
部署位置
将.htaccess文件放置在您的React项目构建输出的根目录中。例如，如果您使用create-react-app，运行npm run build后会生成一个build文件夹，您应该将.htaccess文件放置在build文件夹的根目录下。然后将build文件夹中的所有内容上传到您的主机空间（如Hostinger的public_html目录）。
注意事项
服务器类型： 上述.htaccess配置专门适用于Apache服务器。如果您的主机使用Nginx，则需要采用不同的配置方式。Nginx的等效配置通常会在服务器块（server block）中，使用try_files指令，例如：
location / { try_files $uri $uri/ /index.html;}
mod_rewrite模块： 确保您的共享主机已启用Apache的mod_rewrite模块。大多数现代共享主机都会默认启用，但如果配置无效，请联系您的主机提供商进行确认。缓存： 在部署.htaccess文件后，建议清除浏览器缓存，有时服务器端也可能存在缓存，可能需要等待一段时间或联系主机提供商清除。子目录部署： 如果您的React应用不是部署在域名的根目录，而是在一个子目录（例如 yourdomain.com/my-app/），除了修改RewriteBase，您可能还需要调整React Router的basename属性，并确保在package.json中设置homepage字段。
总结
通过正确配置服务器的URL重写规则，您可以轻松解决React单页应用在共享主机上刷新或直接访问非根路径时出现的404错误。.htaccess文件为Apache服务器提供了一种强大而灵活的方式来管理URL，确保您的SPA能够无缝运行，为用户提供流畅的导航体验。理解其工作原理对于成功部署现代Web应用至关重要。
以上就是React单页应用部署在共享主机时404错误：.htaccess配置指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529604.html
微信扫一扫 
支付宝扫一扫 
