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

Question

我有一个现有的 React 项目托管在某个域中，例如 http://xyz.dev 现在我想在同一个域中托管另一个 react 应用程序，但在不同的目录中，比如 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 的概念有关。我们需要在服务器中创建一个别名配置，以告诉服务器从不同的目录中获取/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 应用程序。