如何将html页面集成到React.js内置的网站中

Question

I'm still learning React.js. Recently I've built a site using React.js. I was trying to add a demo page (pure html and javascript) to the react site. The demo page consists of an index.html, a bundle.js and a css stylesheet. I created a demo folder at the root of the react site and put the demo files inside that folder. My question is how I can get access to the demo page by going to http://reactsite/demo/ Do I have to use react router and wrap the demo page into a react component? Thanks in advance!

Answer 1

To render pure html in with react yes you would need to use react-router to render a component at that url and then use dangerouslySetInnerHTML to read the html file as real html and not escape characters in the file

your route would be something like this

<Route path="demo" component={TemplateHTMLComponent} />

then your component would be something like this

const htmlFile = require('../some/path/to/html/file');

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