如何使用basepath + nginx部署React

Question

各位！

我正在尝试在生产中部署一个react应用程序。

我的案子。

在生产中，我的应用程序将有一个动态的basepath，并在构建中更改它。

示例：

• example.com/basepath
• example.com/basepath2

我的package.json

...
"scripts": {
 "build:basepath": "PUBLIC_URL=basepath react-app-rewired build",
 "build:basepath2": "PUBLIC_URL=basepath2 react-app-rewired build",
}

在我的路线中，使用动态basepath设置basename。

我的nginx.conf

server {
    listen       80;
    server_name  _;

    error_page 400 404 405 =200 @40*_json;

    location @40*_json {
      default_type application/json;
      return 200 '{"code":"1", "message": "Not Found"}';
    }

    location ~ /basepath{
     root   /usr/share/nginx/html;
     try_files $uri /basepath/index.html;
    }

}

我可以通过example.com/basepath访问应用程序。它的工作

如果我访问example.com/basepath/接收一个空白页面

访问example.com/basepath，这些块被下载到example.com/basepath/static/chank.

https://i.imgur.com/OHvMOeH.jpg

访问example.com/basepath/块url是错误的example.com/basepath/basepath/statics/chank....

https://i.imgur.com/7WyAr7i.png

当应用程序链接改变路线时，一切正常。

https://i.imgur.com/BBUfZWL.jpg

我不知道是nginx中的错误还是react路由器中的错误

什么主意？

对不起，我的英语，这是我的第一个话题

Answer 1

你试过使用HashRouter而不是BrowserRouter吗？