Question

我想用带有多个HTML页面的React构建一个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

如果您使用的是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/

Answer 2

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

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

Answer 3

退出应用似乎不是正确的选择。我发现 this answer 似乎效果更好。这是答案的引述。

<块引用>

如何将 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，但它需要一个 nodejs express 服务器作为后端。

Answer 4

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

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

4 个答案: