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哈哈~
先记录一下,总结:稍后完善