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

Question

我有一个现有的反应项目托管在某些领域，如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>

或者是其他任何方式吗？ 将立即提供帮助。

Answer 1

终于想通了。 它与名为Alias的概念有关。 我们需要在服务器中创建一个Alias配置，告诉服务器从另一个目录中获取/ 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应用程序。

Answer 2

快递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);
  }
});

我希望这有帮助 ：）