React路由之BrowserRouter页面刷新报错，nginx服务器的配置问题

React路由之BrowserRouter页面刷新报错，nginx服务器的配置问题

react单页面项目使用BrowserRouter路由时，对处于二级或多级路由状态的页面进行刷新，路由会被发送到服务器，此时，就需要在服务器端进行配置，将路由重定向到项目的唯一页面index.html，否则会报错404。

若使用nginx来充当服务器，需要添加以下配置

server {
    listen  3000;
    server_name  localhost;
    location / {
       root   html/project;
       index  index.html;
	   gzip_static on; #静态压缩
	   #路由重定向配置
		try_files $uri $uri/ /index.html;
    }
	#配置访问后台接口代理
	location  /project {
         proxy_pass   http://127.0.0.1:13000/project;
    }
}

此时还有一个问题需要注意，如果nginx既充当服务器，又充当前后端分离的代理服务器时，有可能会发生以下情况：
路由的前缀与请求后台的前缀一致的情况。

比如后台接口路径为/project/getDic，而菜单路由为/projectItem/dicManagement，此时，根据nginx的location匹配原则，路由也匹配到了“/project”对应的location，此时进行二级路由的刷新也会报错404，因为将路由也代理到了后台服务器，而后台服务器没有对应的Controller进行处理。
遇到以上情况时需要对“/project”对应的location进行修改，可以修改为：

location  /project/ {
    proxy_pass   http://127.0.0.1:13000/project/;
}

具体的修改方案需要根据自己的路由和接口路径而定，这里的方案只是针对我自己的项目进行的修改。