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

how to run two react js applications in same domain

本文关键字：两个 react 应用程序 js 运行      更新时间：2023-09-26

我有一个现有的react项目托管在一些领域，如http://xyz.dev现在我想在同一域中托管另一个react应用程序，但在不同的目录下，让我们说xyz.dev/newApp。问题是，我所面临的是xyz.dev的反应路由器将/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>

或者还有其他方法吗?如能及时帮助，不胜感激。

终于想通了。这与一个叫做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应用程序。
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);
  }
});

我希望这对你有帮助。

相关文章：