Static HTML in React Component


#1

I am creating a webapp using React and flow-router. Certain pages in the app, like help files, would be better written as static html files than as individual components – it seems strange to wrap each help page in a component, it also makes editing them harder as the javascript would have to be rebuilt.

What is the best solution to creating a react component which just loads and displays a static page on the same domain? With such a a component, I could just setup a route, say /help/:page, which mounts that component and displays the contents of :page (which would be placed in the /public directory).

The component could just display an iframe, however then any links in the displayed help page would be handled by the iframe, instead of the main app.

Another option would be to have the server parse the html files into strings and then either include them as part of client javascript or send them via methods. Is there a package like static-html that parses each html file into its own client accessible JS object instead of adding the contents to the main app html?

Option 3 would be to do an http get request in the component. Maybe this is the best way?

What is the optimal solution here?


#2

hi, did you find any solutions for this?


#3

You could serve a static HTML page on the server and link to it, but you’d be unloading all the application state.

To avoid that, I would just do it as regular react, but an http get request would work too.

You can inject raw HTML like so:

<div id="body" dangerouslySetInnerHTML={{__html: rawHtmlString}}/>