Reactjs 如何捆绑React应用程序以在服务器上的任何子目录中工作？

解释如何将react应用程序捆绑到web服务器上的特定子目录进行部署。我想捆绑我的react应用程序，以便在我的Web服务器上的任何子目录上工作。换句话说：是否有可能构建一个react应用程序，以便我可以将其从

到

或

不重建或更改任何内容？

在package.json中

"homepage": ".",

---

如果您使用的是react router dom，如果您知道自己的目录名，则可以在路由器中将basename设置为“/目录名”

或

如果要将基名称设置为动态，请使用

（注意：如果您使用的是子布线，则此选项将不会有用）

或

如果是子路由，请为路由设置一个标准字符串

例如：

 let basename_path = null;
   var url = window.location.pathname.toLowerCase();
   if(url.indexOf("react") === -1){    // If string(react) not available
            basename_path = "/";
   }
    else{
       var array = url.split("react");
       basename_path = array[0]+"react/";
     }


 <Router basename={basename_path}>   
   <Route exact path="/react/home" component={home}/>
   <Route exact path="/react/contactus" component={contactus}/>
   <Route exact path="/react/aboutus" component={aboutus}/>               
 </Router> 

让basename_path=null；
var url=window.location.pathname.toLowerCase（）；
if（url.indexOf（“react”）===-1）{//if字符串（react）不可用
basename_path=“/”；
}
否则{
var数组=url.split（“react”）；
basename_path=数组[0]+“react/”；
}

对这一问题和类似问题的回答似乎忽略了一点，即如果使用客户端路由（如React Router），则从子目录提供服务时应进行一些后端更改

有几种方法可以做到这一点。一是使用

；这种方法在React Router文档中有详细描述

另一种方法是将

与Express一起使用。以下是实现这一目标的步骤：

在您的应用程序中：

...
...

然后，在

package.json

中添加：

homepage: "https://example.com/mySubdirectory"

（请注意，如果使用客户端路由，“.”将不起作用。）

然后，在Express中，尝试

连接历史api回退

包（建议在Vue路由器文档中使用）

const express=require（'express'）；
const historyFallback=require（'connect-history-api-fallback'）；
常量app=express（）；
应用程序使用（历史回退）；

否则，用户将无法直接输入

https://example.com/mySubdirectory/my_route

在浏览器的url栏中；他们将得到一个

无法得到
错误

您可以在Apache上看到上述示例。
请描述我们为什么需要添加相同的内容。不幸的是，如果您使用客户端路由，此解决方案不起作用。在您的示例中，使用CRA（创建React应用程序）时，如何使用
“homepage”：“
”？如果我没有弄错的话，那么最初的问题是不必为特定路径构建生产应用程序。