部署带react-router的create-react-app至Godaddy后刷新路由404问题

这个问题是单页应用（SPA）的典型通病：你的React路由属于前端路由，正常跳转时是JS在页面内处理路径切换，但刷新页面时，浏览器会直接向服务器请求/signin、/dashboard这类路径——可服务器上根本没有对应名称的文件，自然返回404。我们需要通过配置.htaccess让服务器把所有非静态资源的请求都转发到index.html，交给React的前端路由来处理。

正确的.htaccess配置 #

把下面的内容放到你项目根目录（也就是index.html所在的目录）的.htaccess文件里：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

配置细节解释： #

• Options -MultiViews：关闭Apache的MultiViews功能，避免它自动匹配相似路径的文件，干扰我们的路由规则
• RewriteEngine On：开启URL重写模块，这是规则生效的前提
• RewriteCond %{REQUEST_FILENAME} !-f：判断请求的不是真实存在的文件（比如你的CSS、JS、图片这些静态资源不会被重定向）
• RewriteCond %{REQUEST_FILENAME} !-d：判断请求的不是真实存在的目录
• RewriteRule ^ index.html [QSA,L]：把所有符合上面两个条件的请求，都重定向到index.html，同时保留原请求的查询参数（QSA），并标记这是最后一条规则（L），避免后续规则干扰

GoDaddy专属注意事项 #

• 文件位置要准确：确保.htaccess和你的index.html在同一个目录下，也就是GoDaddy主机的public_html（或者你部署应用的子目录）里
• 显示隐藏文件：GoDaddy的文件管理器默认会隐藏.htaccess这类以点开头的文件，你需要在文件管理器的设置里开启“显示隐藏文件”，才能看到和编辑它
• 缓存清理：修改.htaccess后，可能需要清除浏览器缓存，或者等待GoDaddy服务器的缓存更新（一般几分钟内就会生效）
• 确认重写模块状态：GoDaddy主机默认是开启mod_rewrite的，但如果配置后还是不行，可以联系客服确认这个模块是否正常启用

备选方案：换用HashRouter #

如果你暂时不想折腾服务器配置，也可以把React的路由从BrowserRouter换成HashRouter——这种路由会把路径变成/#/signin带哈希的格式，刷新时浏览器只会请求根目录的index.html，不会触发服务器404。缺点是URL会多一个#，美观性稍差。

修改后的路由代码示例：

import { HashRouter as Router, Route } from 'react-router-dom';

<Router>
  <div>
    <Route exact path="/" component={Splash} />
    <Route path="/signin" component={SignInView} />
    <Route path="/signup" component={SignUpView} />
    <Route path="/dashboard" component={DashboardView} />
  </div>
</Router>

内容的提问来源于stack exchange，提问作者shymaa