11

我想用 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

4

4 回答 4

8

如果你正在使用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/

于 2019-05-12T15:19:42.413 回答
1

弹出应用程序似乎不是正确的选择。我发现这个答案似乎效果更好。这是答案的引述。

如何将 React 应用程序建模为多页面应用程序。有很多方法，但是，一种是像这样构造文件：

./app --> main page for your app
    ./app/page1/ --> page 1 of your app
    ./app/page2/ --> page 2 of your app
    ...

这样，每个“页面”都将包含一个自包含的反应项目。您的主应用程序页面可能包含加载这些页面的超链接，或者您可以在您的 javascript 代码中异步加载它们。

我现在使用的另一种方法是使用不同的工具链。我正在使用支持多页的Gatsby 。您也可以使用next.js，但它需要一个 nodejs express 服务器作为后端。

于 2021-05-15T14:55:07.467 回答
-2

我想你需要一个路由器。这是您可以使用的很棒的反应路由器库

https://reacttraining.com/react-router/web/example/basic

于 2018-07-12T13:43:27.440 回答
-3

到目前为止，我了解到 React native 不支持多个 HTML 页面，因为它是一个单页面应用程序。我将 index.html 保留为单个 HTML 页面，并在 react 中解决了条件渲染的问题。当条件满足时，我将渲染另一个 React .tsx 文件。

于 2018-07-18T08:17:34.750 回答