如何使用 ExpressJS 将用户路由到单独的独立反应应用程序？答案

【问题标题】：How to route users to separate standalone react apps using ExpressJS?如何使用 ExpressJS 将用户路由到单独的独立反应应用程序？
【发布时间】：2021-10-28 16:37:15
【问题描述】：

我已经在网上广泛搜索但找不到解决方案，也许我用一种不常见的方式来表达这个问题。

我正在构建一个 Node-Express 网站，它只需要在一两个页面上使用 ReactJS。所有其他页面都在服务器端呈现。

当用户想要访问常规页面时，我使用 Express 和 EJS 来呈现视图。但是当用户想要访问我用 react 构建的页面时，我希望用户看到一个单页的 React 应用程序。当用户想要访问我用 react 构建的另一个页面时，用户会看到另一个完全独立的单页 react 应用程序。意思是，我不想在我的网站上使用 React-Router。我不需要对网站的大部分内容做出反应。

我目前正在使用 React CDN。它有效，但功能有限。我不能 npm install 现成的组件。

假设我希望路由“/”和“/app”成为两个独立的 React 应用程序，并且所有其他路由都被服务器渲染。我该怎么做呢？我会在两个单独的文件夹中运行 create-react-app 两次，一个用于“/”，一个用于“/app”？

【问题讨论】：

标签： node.js reactjs express server-side-rendering mern

【解决方案1】：

通常对于这种情况，我会创建一个子域来分离应用程序的逻辑。例如，如果我的域是 example.com 这可能是一个动态网站，我会让 admin.example.com 来托管我的管理仪表板以响应或任何其他单页面框架。

关于您的问题，如果您仅限于使用您的方法，那么首先您应该在 react-router-dom 的 BrowerRouter 中定义一个基本名称，以便在 url 下托管您的 react 应用程序

// this way host react app under example.com/calendar
<BrowserRouter basename="/dashboard">
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
    ...
</BrowserRouter>

现在在你的 index.html 中添加

<base href="%PUBLIC_URL%/">

如果你需要在 react 应用中推送到某个 url，那么制作一个单独的文件

//history.js
import {createBrowserHistory} from 'history';

export default createBrowserHistory({ basename: 'dashboard'});

定义你的路线时同样使用

<!-- import history and add history prop -->
<Router history={history}>
  ...
</Router>

最后在您的 package.json 中添加主页路径，该路径与您定义的基本名称相同

//package.json
"homepage": "./dashboard"

之后，您可以使用典型的方法来定义路线。如果您在共享主机/cpanel 上托管，您可以将构建文件夹粘贴到域的主路由文件夹下。如果您使用的是自托管的 linux 服务器，您可以创建不同的文件夹并使用反向代理 (apache/nginx) 来根据需要重定向流量。我希望这会有所帮助。

【讨论】：