无法在Route中使用Route渲染HTML文件
[英]Unable to render html file using Route in react
问题描述
I am trying to render html using Route but browser is giving me following error: 
我正在尝试使用Route渲染html，但浏览器却给我以下错误：
Failed to compile.
./src/hello.html 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.
<html> | Hello | </html>
I have already tried using babel but when I run npm start the terminal is telling me undo all the babel and webpack changes - 我已经尝试使用babel，但是当我运行npm start ，终端告诉我撤消所有babel和webpack的更改-
- Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
- Delete node_modules in your project folder.
- Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
- Run npm install or yarn, depending on the package manager you use.
- If you used npm, install yarn ( http://yarnpkg.com/ ) and repeat the above steps with it instead.
- Check if /Users/shubhamnandanwar/Desktop/react/YourHourWebApp/node_modules/babel-loader is outside your project directory.
- Try running npm ls babel-loader in your project folder.
This is my App.js file 这是我的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;
I am new in react and have spent hours trying to fix it. 我是新来的人，已经花了数小时试图修复它。 Can anyone please give me some direction 谁能给我一些指导
3 个解决方案
解决方案1
1 2019-09-11 05:46:22
1) First of all install html-loader module. 1）首先安装html-loader模块。
npm install --save-dev html-loader
2) Inside webpack.config.js 2）在webpack.config.js
{
modules: {
loaders: [
{ test: /\.html$/, loader: 'html' }
]
}
}
3) Correct the calling component 3）更正调用组件
import htmlFile from './hello.html';
class TemplateHTMLComponent extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{ __html: this.htmlFile }} />;
}
}
Hope that helps!!! 希望有帮助！！！
解决方案2
0 2019-09-11 05:30:59
please put 'htmlFile = require("./hello.html");' 请输入'htmlFile = require（“ ./ hello.html”）;' line on the top outside the class. 在课外的顶部。
const htmlFile = require("./hello.html");
class TemplateHTMLComponent extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{ __html: this.htmlFile }} />;
}
}
解决方案3
0 2019-09-11 05:49:53
Make sure your html is a string. 确保您的html是字符串。 Read more here https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml 在此处阅读更多内容https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
Then export it from a .js file like this: 然后从.js文件中将其导出，如下所示：
// inside hello.js file
// using es6 syntax
export default `<html> | Hello | </html>`
or 要么
// inside hello.js file
// using older syntax
module.exports = `<html>blah blah</html>`
then import it: 然后将其导入：
import htmlFile from 'htmlFile'
or 要么
const htmlFile = require('hello')
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.