React js：在单页应用程序中呈现多个索引 html答案

【问题标题】：React js : Rendering multiple index html in a single page applicationsReact js：在单页应用程序中呈现多个索引 html
【发布时间】：2019-12-29 19:14:55
【问题描述】：

我正在用 React 和 Node.js 开发一个电子商务网站。我面临以下两个问题。

我有两个不同的主文件 .html 用于管理端和前端端。因此，我正在使用内置的 React 管理模板，其中 index.html 在项目开始时加载。我的问题是如何加载另一个大师.html 进行前端设计？
我想使用 Node.js 作为后端。因此，我无法将 node.js 与 React 前端或管理端集成，如果 React 应用程序运行，它将运行。

我们将不胜感激任何建议或解决方案步骤。

【问题讨论】：

将更高级别的索引页面作为顶级页面，并将您当前的两个“顶级”页面都转换为该页面的子页面。
您还可以在 index.html 页面中使用单独的 div 作为 ReactDOM.render 目标，每个页面 1 个。
@DovRine 感谢您的回复，有任何示例或示例代码吗？
顺便说一句，如果您使用 docker 或虚拟机，您可以运行多个节点服务器。

标签： node.js reactjs nodes e-commerce

【解决方案1】：

这是第一个想法的一个非常基本的概念：

const AdminIndexPage = children => (<section className="AdminIndexPage">{children}</section>)

const PublicIndexPage = children => (<section className="PublicIndexPage">{children}</section>

const App = props => {
    if(props.indexPageToShow === 'admin'){ 
        return <AdminIndexPage {...props} />
    }else{
        return <PublicIndexPage {...props} />
    }
}

这是第二个想法的一个非常基本的概念：

index.html

<html>
<head>
    <script src="index.js"></script>
</head>
<body>
      <div id="AdminPageIndex"></div>
      <div id="PublicPageIndex"></div>
</body>
</html>

index.js

import {AdminPageIndex, PublicPageIndex} from './pages'

ReactDOM.render(AdminPageIndex, document.getElementById('AdminPageIndex'))

ReactDOM.render(PublicPageIndex, document.getElementById('PublicPageIndex'))

【讨论】：

不，我想用不同的脚本在两个不同的 html 中渲染组件。
在 2 个不同项目中具有不同 Web 根目录的子域？我想我不明白你在做什么。
实际上我将有两个不同设计的不同html模板，一个用于管理仪表板，另一个用于前端仪表板。将有两个不同设计的 html，但到目前为止，我知道 react 可以将任何组件加载到单个 html 模板中。因此我面临这个问题。
我的想法 2 解决您的问题
@DovRine 看来我遇到了同样的问题，现在才看到这篇文章。在深入讨论之前，我只是想知道使用第二种解决方案来解决这个问题是否是最佳实践。我需要一个管理面板并为此使用 AdminLTE 模板。我只是不想在剩余的前端单页中使用与管理员相关的 CSS 和脚本。