我想用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
如果使用create react app，则必须首先使用eject项目因为您必须更改Webpack配置中的入口点
第一个eject(如果您没有webpack配置文件(
npm run eject
然后转到配置文件
在webpack.config.js中
entry: {
index: [
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appIndexJs,
],
admin:[
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appSrc + "/admin.js",
]
},
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/[name].bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath),
},
之后，你应该添加Wepack插件，并将其添加到你的项目中
new HtmlWebpackPlugin({
inject: true,
chunks: ["index"],
template: paths.appHtml,
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ["admin"],
template: paths.appHtml,
filename: 'admin.html',
}),
你也应该重写url
historyApiFallback: {
disableDotRule: true,
// 指明哪些路径映射到哪个html
rewrites: [
{ from: /^/admin.html/, to: '/build/admin.html' },
]
}
你可以阅读本页了解更多信息http://imshuai.com/create-react-app-multiple-entry-points/
弹出应用程序似乎不是正确的选择。我发现这个答案似乎更有效。以下是答案中的一句话。
如何将react应用程序建模为多页应用程序。有很多然而，一种方法是这样构建文件：
./app --> main page for your app
./app/page1/ --> page 1 of your app
./app/page2/ --> page 2 of your app
...
这样，每个"页面"都将包含一个自包含的react项目。您的主应用程序页面可能包含加载以下内容的超链接页面，或者您可以在javascript代码中异步加载它们。
我现在使用的另一种选择是使用不同的工具链。我正在使用Gatsby，它支持多个页面。您也可以使用next.js，但是它需要一个nodejsexpress服务器作为后端。
我想你需要一个路由器。这里是伟大的反应路由器库，你可以使用
https://reacttraining.com/react-router/web/example/basic
到目前为止，我了解到React native不支持多个HTML页面，因为它是一个单页面应用程序。我将index.html保留为单个html页面，并在react中解决了条件呈现的问题。当一个条件被填满时，我将呈现另一个React.tsx文件.