React-Router V4+ 打包后刷新网页404错误

开发使用的构建工具是 create-react-app
我在使用 React-Router V4+ 版本的时候,

npm run build

编译成功后放在我本地的 Tomcat9 上,运行后可以正常访问首页,跳转其它页面 URL 都正常显示, 但是再刷新当前页面404错误。
按照官方提示:

There is also a similar approach for Apache servers. Create an .htaccess file in your folder's root:

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

问题1 :
创建了 .htaccess 文件后,该文件是放在我编译好的包的根目录(index.html所在目录)下,还是在 其它位置。如果需要修改其它东西如 Apache 配置文件,要怎么修改。
问题2 :
在网上看到这种情况都是将 URl 重定向到 index.html,请问还有其它不修改服务器配置文件的解决办法没有。
跪求解答,谢谢

阅读 8.1k
2 个回答

我没看过文档,建议你要理解内部的机制。

之所以你在浏览器内可以由首页跳转到其他路由地址,是因为这是由前端自行渲染的,你在React Router定义了对应的路由,脚本并没有刷新网页访问后台,是JS动态更改了location。

当你刷新时,你首先是访问的后台地址,然后返回的页面内加载了React代码,最后在浏览器内执行;也就是说如果这个时候报404,是因为你后台并没有针对这个路由给出返回HTML内容,也谈不上执行React Router了。

解决办法就一条:如果你期望所有的路由都由React Router来定义,只有你的后台,无论任何路径,都返回index.html就好了。剩下的事情交给React Router。那么你要做的就是修改后台服务器,可以放在apache,也可以放在你的java路由内做一个通配路径处理。

关于问题的原因,1楼已经解释的比较清楚了,关键点是要明白客户端路由和服务端路由的区别。服务端路由,不同的服务器配置的方式不同,楼主自己查。另外一种简单的解决方法,使用HashRouter,不要使用BrowserRouter,这样所有的请求都会定位到index.html这一个页面,服务器端也不需要任何配置了。
PS. 不需要担心官网上说的使用HashRouter不支持location.key 和 location.state,这两个属性你几乎不会使用到的,放心大胆用吧。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题