Question

我正在尝试使用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;

我是新来的反应者，已经花了数小时试图修复它。谁能给我一些指导

Answer 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 }} />;
  }
}

希望有帮助！

Answer 2

请放入'htmlFile = require（“ ./ hello.html”）;'在课外的顶部。

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

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

Answer 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')

无法在Route中使用Route渲染HTML文件

3 个答案: