Question

This SO thread说明了如何将React App捆绑以部署到Web服务器上的特定子目录。我想将我的React应用程序捆绑在我的Web服务器上的 any 子目录中。换句话说：是否有可能构建一个React应用，以便我可以将其移出

http://server/foo

到

http://server/bar

或

http://server/foo/bar

无需重建或更改任何内容？

Answer 1

在package.json中

"homepage": "https://yourdomain.mn/foo/bar",

Answer 2

如果您使用react-router-dom，如果您知道目录名称，则可以在路由器中将basename设置为“ / directory-name”

或

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

（注意：如果您使用子路由，这将不会有用）

或

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

示例：

 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>

Answer 3

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

有几种解决方法。一种是使用<HashRouter>； here或React Router文档中对该方法进行了很好的描述。

另一种方法是将<BrowserRouter>与Express一起使用。为此，请执行以下步骤：

在您的应用中：

    <BrowserRouter basename={process.env.PUBLIC_URL}>
        <Route path="/your_route">
          ...
        </Route>
        <Route exact path="/">
          ...
        </Route>
    </BrowserRouter>

然后在package.json中添加：

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

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

然后，在Express中，尝试connect-history-api-fallback软件包（在Vue Router文档中推荐）。

const express = require('express');
const historyFallback = require('connect-history-api-fallback');

const app = express();
app.use(historyFallback);

否则，用户将无法直接在浏览器的网址栏中输入https://example.com/mySubdirectory/my_route；他们会收到cannot GET错误。

您可以在Apache here上看到上述示例。

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

3 个答案: