react public folder html path

by

I would like to know if there is a possibility to somehow customize react so that it reads HTML files inside folders and gives them routing for example quiz/age.html, quiz.sex.html.

public/
offer/index.html
quiz /
age.html
sex.html
index.html
favicon.ico

If not maybe someone knows what would be a good way besides iframe to insert html into my react app so it has the routing I need.

I tried the option with iframe and I don’t really want to use this approach in my application.

You can download the HTML content of the quiz/*.html and set it inside div using dangerouslySetInnerHTML (make sure that it’s 100% safe and there is no chance for XSS attack – that’s why the parameter is called dangerouslySet...)

so it would look like this:

const [htmlContent, setHtmlContent] = useState('');

useEffect(() => {
  fetch(`/quiz/age.html`)
    .then((response) => response.text())
    .then((html) => setHtmlContent(html));
}, []);

return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;

Leave a Comment