极客观点
项目管理
HarmonyOS
我想用 React 构建一个包含多个 HTML 页面的 Web 应用程序。例如 login.html 和 index.html。我已经创建了这些 HTML 页面并使用我的后端将它们映射到 URI。所以我有 localhost:8080/login 和 localhost:8080/index。不幸的是，React 只使用 index.html 文件来呈现内容！
所以 index.html 有效并且显示了 React 内容： localhost:3000/index.html
<!-- index.html -->
...
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="wizard"></div>
</body>
...
<!-- index.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FetchData from "./FetchData";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<div className="d-flex flex-column">
<div className="bg-dark text-light AppHeading">Self-Service-Webwizard</div>
<div className="bg-white"><FetchData /></div>
</div>,
document.getElementById('wizard') as HTMLElement
);
registerServiceWorker();
但是 wizardLogin.html 不显示 React 内容： localhost:3000/wizardLogin.html
<!-- wizardLogin.html -->
...
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div>Wizard login</div>
<div id="wizardLogin"></div>
</body>
...
<!-- LoginPage.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import LoginForm from "./LoginForm";
ReactDOM.render(
<div>
<div><h1>Wizard Login.tsx</h1></div>
<div><LoginForm/></div>
</div>,
document.getElementById('wizardLogin') as HTMLElement
)
;
registerServiceWorker();
我是不是做错了什么，或者无法使用 React 提供多个 HTML 文件？
Github： https ://github.com/The-Taskmanager/SelfServiceWebwizard
原文由 Taskmanager 发布，翻译遵循 CC BY-SA 4.0 许可协议
到目前为止，我了解到 React native 不支持多个 HTML 页面，因为它是一个单页应用程序。我将 index.html 保留为单个 HTML 页面，并通过反应中的条件渲染解决了这个问题。当条件满足时，我将渲染另一个 React .tsx 文件。