如何在同一个域中运行两个 React js 应用程序答案

【问题标题】：how to run two react js applications in same domain如何在同一个域中运行两个 React js 应用程序
【发布时间】：2017-01-22 08:12:41
【问题描述】：

我有一个现有的 React 项目托管在某个域中，例如 http://xyz.dev 现在我想在同一个域中托管另一个反应应用程序，但在不同的目录中可以说 xyz.dev/newApp。我面临的问题是 xyz.dev 的 react-router 将 /newApp 视为其虚拟路由，并且它不重定向到 newApp 而不是获取 xyz.dev 的内容。有什么方法可以告诉 react-router 忽略所有来自 /newApp 的请求。

<Route path="/" component={BootstrapApp} >
    <IndexRoute component={HomeApp} />
    <Route path="about" component={AboutusApp} />
    /* I need something like <Route ignorePath="newApp"/> */
</Route>

或者还有其他方法吗？我们将立即获得帮助。

【问题讨论】：

标签： javascript url reactjs routes react-router

【解决方案1】：

终于明白了。它与称为别名的概念有关。我们需要在服务器中创建一个别名配置，告诉服务器从不同的目录获取 /newApp 的所有内容。

Alias "/newApp" "C:/xampp/htdocs/react/xyz/newApp/www/public/"
<Directory "C:/xampp/htdocs/react/xyz/newApp/www/public/">
    Options -Indexes +FollowSymLinks +MultiViews
    AllowOverride None
    Require all granted
    RewriteEngine On
    RewriteBase /newApp
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^.*$ index.html [NC,L]
</Directory>

同样在你的 newApp 路由中，我们必须将路由设置为

<Route path="/newApp/" component={BootstrapApp} >
    <IndexRoute component={HomeApp} />
    <Route path="about" component={AboutusApp} />
</Route>

仅使用这两种配置，我们就可以在同一个域中运行两个完全不同的 React 应用程序。

【讨论】：

【解决方案2】：

Express v4

一种方法是使用您的 Express 应用程序的 .get 方法。在您的 .use 语句之前添加它可能会调用包含您的第二个应用程序的不同索引文件。

var app = new (require('express'))();
var port = 3000;

app.get('/newapp', function(req, res) {
  res.sendFile(__dirname + '/newapp/index.html');
});

app.use(function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(error) {
  if (error) {
    console.error(error);
  } else {
    console.info("Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port);
  }
});

我希望这会有所帮助:)

【讨论】：

其实我在 apache 服务器上使用 react js 应用程序