无法在反应中使用 Route 渲染 html 文件答案

【问题标题】：Unable to render html file using Route in react无法在反应中使用 Route 渲染 html 文件
【发布时间】：2020-01-12 21:43:12
【问题描述】：

我正在尝试使用 Route 渲染 html，但浏览器给了我以下错误：

编译失败。

./src/hello.html 1:0 模块解析失败：意外令牌 (1:0) 你可能需要适当的加载器来处理这种文件类型。

<html> | Hello | </html>

我已经尝试过使用 babel，但是当我运行 npm start 时，终端告诉我撤消所有 babel 和 webpack 更改 -

删除项目文件夹中的 package-lock.json（不是 package.json！）和/或 yarn.lock。

删除项目文件夹中的 node_modules。

从项目文件夹中 package.json 文件中的依赖项和/或 devDependencies 中删除“babel-loader”。

根据您使用的包管理器运行 npm install 或 yarn。在大多数情况下，这应该足以解决问题。如果这没有帮助，您可以尝试其他一些方法：

如果您使用 npm，请安装 yarn (http://yarnpkg.com/) 并使用它重复上述步骤。这可能会有所帮助，因为 npm 已知包提升问题，这些问题可能会在未来的版本中得到解决。

检查 /Users/shubhamnandanwar/Desktop/react/YourHourWebApp/node_modules/babel-loader 是否在您的项目目录之外。例如，您可能不小心在主文件夹中安装了一些东西。

尝试在您的项目文件夹中运行 npm ls babel-loader。这将告诉您安装了 babel-loader 的其他包（除了预期的 react-scripts）。

这是我的 App.js 文件

import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Dashboard from "./components/dashboard/Dashboard";
import UserStory from "./components/stories/UserStory";
import SignIn from "./components/auth/SignIn";
import SignUp from "./components/auth/SignUp";
import CreateStory from "./components/stories/CreateStory";
import { Redirect } from "react-router-dom";

class App extends Component {
  reload = () => window.location.reload();

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Switch>
            <Route exact path="/" component={TemplateHTMLComponent} />
            <Route exact path="/stories" component={Dashboard} />
            <Route path="/story/:id" component={UserStory} />
            <Route path="/signin" component={SignIn} />
            <Route path="/signup" component={SignUp} />
            <Route path="/uploadStory" component={CreateStory} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

class TemplateHTMLComponent extends React.Component {
  htmlFile = require("./hello.html");
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.htmlFile }} />;
  }
}

export default App;

我是 react 新手，花了好几个小时试图修复它。谁能给我一些指导

【问题讨论】：

标签： html reactjs react-router

【解决方案1】：

1) 首先安装html-loader 模块。

npm install --save-dev html-loader

2) 内部webpack.config.js

{
  modules: {
    loaders: [
      { test: /\.html$/, loader: 'html' }
    ]
  }
}

3) 更正调用组件

import htmlFile from './hello.html';

class TemplateHTMLComponent extends React.Component {
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.htmlFile }} />;
  }
}

希望对你有帮助！！！

【讨论】：

嘿@tarzenchugh，我曾尝试安装 webpack，但 react 告诉我恢复所有 webpack 更改。你能指导我应该如何安装 webpack 吗？不安装webpack可以直接添加webpack.config.js文件吗？
你在使用create-react-app吗？如果不使用 webpack，你使用的是哪个捆绑器？
我不确定 bundler 是什么，但我想我正在使用 npm
npm 是包管理器。你是如何创建你的应用程序的，是使用create-react-app吗？
是的.. 我用过 create-react-app

【解决方案2】：

请输入 'htmlFile = require("./hello.html");'在课堂外的顶部行。

const htmlFile = require("./hello.html");

class TemplateHTMLComponent extends React.Component {      
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.htmlFile }} />;
  }
}

【讨论】：

请将 webpack.config.js 和 package.json 文件添加到您的问题中。它看起来像一些配置问题。

【解决方案3】：

确保您的 html 是一个字符串。在此处阅读更多信息https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

然后像这样从 .js 文件中导出它：

// inside hello.js file
// using es6 syntax
export default `<html> |   Hello | </html>`

或

// inside hello.js file
// using older syntax
module.exports = `<html>blah blah</html>`

然后导入它：

import htmlFile from 'htmlFile'

或

const htmlFile = require('hello')

【讨论】：