如何添加新的 html 文件以响应应用程序？答案

【问题标题】：How can I add new html files to react application?如何添加新的 html 文件以响应应用程序？
【发布时间】：2019-12-12 08:58:35
【问题描述】：

我一直在互联网上搜索这个问题，我得到的只是不需要创建其他页面，因为 react 是针对单页应用程序的或更改页面内容但不更改页面（url）本身的解决方案。我真正想知道的是：当我使用 create-react-app 创建应用程序时，我得到了所有设置，现在我可以创建在公共目录中创建一个新的 html 文件，如默认 index.html 和将组件渲染到那个新文件？

【问题讨论】：

你当然可以。您需要做的就是调用 ReactDOM.render 并使用您希望将 React 应用程序或组件附加到该页面上的根元素，但如果您想要一个单页应用程序，您可能需要查看 react-router 或 reach-router
@WilomGfx 如果我在另一个页面上尝试它但索引它没有检测到或找不到具有给定 id 的元素
Can't find element with the given id，这是因为我们在webpack.config 文件中设置了index.html。如果要更改文件，则必须将该文件添加到webpack.config 文件中，它将起作用。

标签： reactjs

【解决方案1】：

CRA 正在做的是使用 webpack 从（默认）src/index.js 文件开始捆绑您的代码。这意味着它会创建一个（或多个如果延迟加载）捆绑包，这些捆绑包会加载到public/index.html 文件中。您可以通过查看build/index.html 并查找在</body> 标记之前加载的脚本来检查它。

React 的主要入口点是

ReactDOM.render(<App />, document.getElementById('root'));

您可以在一个 HTML 文件中有多个入口点。如果您想将多个入口点拆分到多个文件中 - 恐怕您需要 eject 您的 CRA 应用程序并自己调整 webpack 配置。

我认为这里描述了类似的问题： Multiple modules for multiple entry points in webpack config for reactjs app

但也许您只是在寻找react-router？您还可以调整服务器配置以将所有路径重定向到 index.html 并让 react-router 处理显示正确的组件。例如。 How to setup apache server for React route?

【讨论】：

所以没有办法通过 create react app 做到这一点？
嗯，有 react-app-rewired 和 customize-cra 这样的东西，但我不知道他们是否允许这样的定制。

【解决方案2】：

根据您的问题，尚不清楚您需要多个 HTML 文件的确切原因，但请从CRA readME 考虑这一点：

如果您想使用 React 和 Node.js 进行服务器渲染，请查看 Next.js 或 Razzle。 Create React App 与后端无关，只生成静态 HTML/JS/CSS 包。

如果您的网站大部分是静态的（例如，作品集或博客），请考虑改用 Gatsby。与 Create React App 不同，它在构建时将网站预渲染为 HTML。

所以我认为需要了解的不是whether it is possible to do this with CRA?，而是Why do you need it? And maybe there is a tool more suitable for your case than CRA.

也许next.js、razzle 或gatsbyjs 会解决您的问题。

【讨论】：