Reactjs 在网站的不同页面上显示react元素

我在学习英语。在我的网站项目中，我有两个带有react元素代码的.js文件，我需要将一个.js文件中的元素集成到index.html页面中，将第二个.js文件中的元素集成到第二个.html页面中。但这两个元素只能显示在index.html页面上。我使用我上传的文件package.json和node_模块，通过命令“npm start”在localhost上运行该项目。如何在我的站点的第二页上显示第二个文件中的react元素

文件“index.html”

---

你能解释一下你想要达到的目标吗？你不需要创建两个不同的React DOM，因为你可以在一个中实现相同的效果。我有两个不同的.js文件，React中有不同的应用程序。我想将一个应用程序放在我学习网站的index.html页面上，将第二个应用程序集成到我网站的第二个页面上。所以我的两个应用程序必须在网站的不同页面上。但当我运行站点时，我的应用程序在索引页上显示，而我的第二个应用程序不在第二页上显示。请检查并重试。如果您需要有关react路由器的更多信息。下面是一个示例文档。如果您有任何疑问，请告诉我。ThanksI只能在my index.html上显示这两个应用程序，但不能在其他页面上显示任何应用程序。为什么？因为你们并没有路线，所以举例来说，若我们有带主页和设置按钮的网站，若我们点击主页按钮，它会遵循不同的路线和相同的设置按钮。如果您不想使用路由，您可能希望像这样配置webpack

<h1>My react element №1</h1>
<div id="app1">
</div>
 .........
<script crossorigin 
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react- 
dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
standalone/6.25.0/babel.min.js"></script>

<script type="text/babel" src="element1.js">   
</script>

class Element1 extends React.Component {
   /* code  */  
}
ReactDOM.render(
<Element1/>,        
    document.getElementById("app1")
); 

<h1>My react element №2</h1>
<div id="app2">
</div>
 .........
<script crossorigin 
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react- 
dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
standalone/6.25.0/babel.min.js"></script>

<script type="text/babel" src="element2.js">   
</script>

class Element2 extends React.Component {
   /* code  */  
}
ReactDOM.render(
<Element2/>,        
    document.getElementById("app2")
); 

{
"name": "reactapp",
"version": "1.0.0",
"scripts": {
    "start": "lite-server"
 },
"devDependencies": {
    "lite-server": "^2.2.2"
 },
"dependencies": {
    "create-react-app": "^3.1.1"
 }
}