node.js - react js : Rendering multiple index html in a single page applications

标签 node.js reactjs nodes e-commerce

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

  1. 我有两个不同的主 .html 文件用于管理端和前端端。因此,我使用内置的 React 管理模板,其中 index.html 在项目启动时加载。我的问题是如何加载另一个主.html用于前端设计?

  2. 我想使用 Node.js 作为后端。因此,我无法将 Node.js 与 React 前端或管理端集成,如果 React 应用程序运行,它们将运行。

任何建议或解决方案步骤都将受到高度赞赏。

最佳答案

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

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'))

关于node.js - react js : Rendering multiple index html in a single page applications,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57643625/

相关文章:

python - 使用多处理过滤 Pandas 中的大型数据框

c# - 如何使用 C# Roslyn 测量方法的嵌套级别

node.js - 如何处理来自分布式系统的两个http请求?

javascript - React 添加一个变量名属性

node.js - 以 react 方式查询 mongodb 集合中所有文档的最佳方法,无需溢出 RAM

javascript - React Router v6 - 检查子元素是否处于事件状态/<Outlet/>会返回组件吗?

javascript - 如何在 ReactJS 中向对象添加多个输入以进行渲染

c++ - 遍历链表和修改或插入节点C++

javascript - Node.js:如何在node-orm中选择和连接表?

javascript - 异步/等待矫枉过正?我是否不必要地使用异步和等待?