Tas*_*ger 10 html jsx typescript react-native tsx
我想用 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',
}),
你也应该重写网址
historyApiFallback: {
disableDotRule: true,
// ???????????html
rewrites: [
{ from: /^\/admin.html/, to: '/build/admin.html' },
]
}
您可以阅读此页面以获取更多信息 http://imshuai.com/create-react-app-multiple-entry-points/
Tas*_*ger -3
到目前为止，我了解到 React Native 不支持多个 HTML 页面，因为它是单页面应用程序。我将index.html保留为单个HTML页面，并通过react中的条件渲染解决了问题。当条件满足时，我将渲染另一个 React .tsx 文件。
| 归档时间： |
|
| 查看次数： |
11187 次 |
| 最近记录： |