如何使用 React 提供多个 HTML 文件？

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

如果您要使用 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',
    }),

你也应该重写 urls

historyApiFallback: {
      disableDotRule: true,
      // 指明哪些路径映射到哪个html
      rewrites: [
        { from: /^\/admin.html/, to: '/build/admin.html' },
      ]
    }

您可以阅读此页面了解更多信息 http://imshuai.com/create-react-app-multiple-entry-points/

Answer 4

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

How to model a react application as a multi page app. There are many ways, however, one would be to structure your files like so:

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

In this way, each 'page' would contain a self contained react project. Your main application page could contain hyperlinks that load these pages, or you could load them asynchronously in your javascript code.

我现在使用的替代方法是使用不同的工具链。我正在使用 Gatsby which has support for multiple pages. You could also use next.js，但是它需要一个 nodejs express 服务器作为后端。

如何使用 React 提供多个 HTML 文件？

How to serve multiple HTML files with React?

html

jsx

typescript

react-native

tsx