react 单页面应用采用browserHistory路由 部署在nginx作静态资源服务时刷新采坑记录

用React、React-Router、Antd、React-Redux 技术栈作了一个SPA应用，Redux存储应用的状态，一按F5 美好的世界瞬间坍塌，本着新技术不能影响用户体验的原则，一顿操做。从React-Router中 path 对应的 component入手，component须要什么数据去后端请求什么数据。虽然请求冗余了点，但坍塌的世界又美好了起来。自测完成后npm run build 一下，包打出来了，丢到nginx上一试处处报错，好多404。今后开始个人单页面应用的采坑记录。。。

前置环境：create-react-app 建立的工程，React-Router 用的是 browserHistory

404 静态资源找不到问题

              

 nginx的匹配规则设置以下：

          

默认状况下，这个构建好的静态资源static 文件夹放到nginx 的html 文件夹下也是能够请求到资源的，可是每次都拷贝来拷贝去太麻烦了。偷个懒吧，把这个改为“./”

又发布了一版，嘿嘿能够了。页面显示正常

按下F5, 熟悉的 Nginx的404 页面跳出来了。到开发环境试试没问题啊，判定是Nginx匹配规则的问题。开始百度rewrite的匹配规则怎么写，nginx -s reload 重启测试的要吐了，仍是搞不定。

最后找到关键词 try_files,但好多人都是以下：

      

放到个人测试环境仍是不行。各类捣鼓： 最后写成以下这样，我按F5,看到了但愿。

       

 页面的静态资源是咱们刚才设置的“./”这种写法，有些路由仍是报错： Uncaught SyntaxError: Unexpected token <，可是没出现 Nginx 404，看到一点点但愿，继续找度娘，有帖子说要不要用相对路径用绝对路径，看控制台一直提示：

     

 把原来的“./”,恢复原状，在package.json中加一个吧。把工程名做为value值。

            

再一顿操做。竟然能够了。全部刷新测试了一遍，能够啦。O(∩_∩)O哈哈~

先记录一下，总结：稍后完善

参考：http://www.javashuo.com/article/p-xekkpfig-o.html