React单页应用部署在共享主机时404错误：.htaccess配置指南

---

当reactjs单页应用（spa）部署到共享主机（如hostinger）时，用户在刷新页面或直接通过url访问非根路径时常会遇到404错误。这并非react路由本身的问题，而是由于服务器未能正确处理客户端路由导致的。本文将详细介绍如何通过配置`.htaccess`文件，实现url重写，从而解决这一常见的部署问题，确保所有路由请求都能正确指向应用的`index.html`。

问题根源：React单页应用与服务器路由的冲突

React应用通常使用客户端路由库（如React Router Dom）来管理页面导航。这意味着当用户在应用内部点击链接时，URL会发生变化，但浏览器并不会向服务器发送新的请求，而是由J*aScript代码在客户端渲染相应的组件。

然而，当用户执行以下操作时，问题就出现了：

1. 直接在浏览器地址栏输入应用的某个非根路径（例如 yourdomain.com/about-us）。
2. 刷新一个非根路径的页面。
3. 通过外部链接（如书签或搜索引擎结果）访问应用的某个非根路径。

在这种情况下，浏览器会向服务器发送一个针对该完整路径的请求。对于一个传统的静态文件服务器而言，它会尝试在文件系统中查找与该路径匹配的物理文件或目录。由于React应用的所有路由都是在index.html中通过J*aScript动态生成的，服务器通常找不到对应的物理资源，从而返回404 Not Found错误。

解决方案：配置服务器URL重写

解决此问题的核心在于告知服务器，对于任何不指向实际文件或目录的请求，都应该将其重写并指向应用的入口文件index.html。这样，index.html加载后，其中的React应用会接管路由，并根据URL路径渲染正确的组件。

对于使用Apache服务器的共享主机环境（Hostinger通常采用Apache），我们可以通过配置.htaccess文件来实现URL重写。

.htaccess配置详解

请在您的React项目构建输出目录（通常是build或public文件夹的根目录）中创建一个名为.htaccess的文件，并添加以下内容：

云从科技AI开放平台

云从AI开放平台

99 查看详情

<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服务器启用了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目录）。

注意事项

1. 服务器类型： 上述.htaccess配置专门适用于Apache服务器。如果您的主机使用Nginx，则需要采用不同的配置方式。Nginx的等效配置通常会在服务器块（server block）中，使用try_files指令，例如：

   location / {
     try_files $uri $uri/ /index.html;
   }

2. mod_rewrite模块： 确保您的共享主机已启用Apache的mod_rewrite模块。大多数现代共享主机都会默认启用，但如果配置无效，请联系您的主机提供商进行确认。
3. 缓存： 在部署.htaccess文件后，建议清除浏览器缓存，有时服务器端也可能存在缓存，可能需要等待一段时间或联系主机提供商清除。
4. 子目录部署： 如果您的React应用不是部署在域名的根目录，而是在一个子目录（例如 yourdomain.com/my-app/），除了修改RewriteBase，您可能还需要调整React Router的basename属性，并确保在package.json中设置homepage字段。

总结

通过正确配置服务器的URL重写规则，您可以轻松解决React单页应用在共享主机上刷新或直接访问非根路径时出现的404错误。.htaccess文件为Apache服务器提供了一种强大而灵活的方式来管理URL，确保您的SPA能够无缝运行，为用户提供流畅的导航体验。理解其工作原理对于成功部署现代Web应用至关重要。

以上就是React单页应用部署在共享主机时404错误：.htaccess配置指南的详细内容，更多请关注其它相关文章！

# 才会  # 九台商标查询推广网站  # 涟淘推广是什么网站  # 网站优化价格推荐  # 网站推广专员是什么  # 南开区网上营销推广平台  # 邵东网站优化公司  # 企业网站优化电池  # 盐城租房网站建设需要  # 有营销推广意图会限流嘛  # 抖音搜索排名关键词优化  # 回调  # 它会  # 这条  # 这是一个  # 客户端  # react  # 如果不是  # 这是  # 您的  # 重写  # app  # 浏览器  # npm  # nginx  # apache  # json  # js  # html  # java  # javascript 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 《咸鱼之王》新版孙坚技能解析  《金山词霸》语音翻译方法  空腹吃苹果好吗 苹果空腹摄入指南  如何在Golang中处理表单文件上传_Golang 表单文件上传示例  解决异步Python机器人中同步操作的阻塞问题  mysql怎么导入sql文件_mysql导入sql文件的方法与技巧  海棠书屋官方在线书籍入口 海棠书屋文学作品浏览官网链接  《小黑盒》删除历史浏览方法  汽车之家网页版免费登录_汽车之家官网首页直接进入  iPhone 15 Pro如何查看存储空间占用_iPhone 15 Pro存储空间查看教程  包子漫画官网链接官方地址 包子漫画在线观看官网首页入口  AffinityDesigner图层蒙版怎么用_AffinityDesigner图层蒙版设计应用  构建可配置的J*aScript加权点击计数器与共享总计功能  C++ cast类型转换总结_C++ reinterpret_cast与const_cast的使用  如何使用 composer 和 aop-php 实现 AOP 编程？  ToDesk远程摄像头功能使用方法_ToDesk远程视频画面查看设置教程  优化2xN网格最大路径和的动态规划算法实践  《百果园》充值余额方法  鸿蒙单条备忘录如何加密  苹果SE如何开启单手模式_苹果SE单手操作功能  如何查询个人病历记录  Win10通知横幅停留时间修改 Win10自定义通知显示时长【技巧】  《暗黑破坏神4》国服回归送狂欢礼包 价值6916元  J*aScript实现网页表单实时输入字段比较与验证教程  Python测试中模块导入路径解析的最佳实践  sublime如何配置PHP开发环境_在sublime中运行与调试PHP代码  Composer如何使用composer-plugin-api开发自定义插件  感染了幽门螺杆菌一定会导致胃癌吗？蚂蚁庄园今日答案最新11.30  TikTok网页版实时观看入口 TikTok网页版短视频在线浏览  电子白板帮助菜单使用指南  Windows自带的便笺数据如何备份_防止数据丢失的便利贴迁移教程【干货】  米侠浏览器插件无法启用怎么办 米侠浏览器扩展兼容性修复  FullCalendar自定义按钮样式定制指南  Win10关闭UAC用户账户控制的方法 Win10降低安全提示等级【技巧】  如何修改Windows截图的默认保存位置_告别C盘让桌面更整洁【教程】  LocoySpider如何批量采集电商商品_LocoySpider电商采集的模板应用  QQ邮箱注册地址 免费获取QQ邮箱账号  虫虫漫画排行榜单入口_虫虫漫画编辑推荐入口  Go语言反射机制：如何访问被嵌入结构体遮蔽的方法  性能与资源监视器快捷打开  firefox火狐浏览器最新官网主页_ firefox火狐浏览器平台入口直达官方链接  WooCommerce 新客户订单自动添加管理员备注教程  猫眼电影app如何参与官方的抽奖活动_猫眼电影官方抽奖参与方法  荣耀盒子应用管理技巧  Python实时数据流中高效查找最大最小值  lol小红书怎么|直播|？lol小红书|直播|是什么意思？  《淘票票》添加到苹果钱包教程  PPT智能排版生成入口 免费PPT内容自动生成平台  《律学法考》查看学习数据方法  《理想汽车》权限管理设置方法 

 2025-10-15