react single-page application deployment using browserHistory route refresh Pit recorded in nginx doing static resource services

With React, React-Router, Antd, React-Redux technology stack made a SPA application, Redux state storage applications, press F5 a better world collapsed the moment, in line with the principles of the new technology does not affect the user experience, meal operation. React-Router in the path from the corresponding starting component, component what data is required to the rear end of what data request. Although the request redundancy point, but the collapse of the world has a better again. After the self-test is completed npm run build it, package play out, try the nginx error thrown around, a lot of 404. Pit began recording my single-page application. . .

Front environment: create-react-app creation project, React-Router using a browserHistory

404 static resources can not find the problem

              

 nginx matching rules are set as follows:

          

By default, this build good static resource static html folder into the folder nginx is also possible to request resources, but each copy to copy went to too much trouble. Lazy, right, put this into a "./"

Has released a version, hey it. Page display properly

Press F5, familiar Nginx 404 pages jump out. Development environment to try, no problem, ah, concluded that the problem Nginx matching rules. Baidu rewrite start how to write matching rules, nginx -s reload restart the test to be sick, or can not handle.

Finally, find keywords try_files, but a lot of people are as follows:

      

Put my test environment or not. Various fiddle:  final written as such, I press F5, see hope.

       

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

     

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

            

再一顿操作。居然可以了。所有刷新测试了一遍,可以啦。O(∩_∩)O哈哈~

先记录一下,总结:稍后完善

参考:https://segmentfault.com/a/1190000008777307  

Guess you like

Origin www.cnblogs.com/yang108/p/12060994.html