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

Question

我有一个托管在诸如http://xyz.dev之类的域中的现有 React项目。我面临的问题是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配置，以告诉服务器从另一个目录获取/ 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应用程序。