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

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

我希望这会有所帮助：）

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

2 个答案: