Open a static HTML in React project

Question

I have a React-Typescript project structure which looks like this:

/src
    /components
        /navigation
            Routes.tsx
            Navbar.tsx
            Footer.tsx
        /main
            Main.tsx
    /error
        403.html //Newly created static HTML

I want to create another error component which will be having a Static HTML. Since it has a lot of dependencies, it cannot be converted to Javascript and I would like to use such static HTML in my project.

I need to be able to call the static using this: localhost:4321/error/403.html. And for this, I have tried calling in the Route like this:

<Route exact path="/error/403.html" render={() => {window.location.href="/src/error/403.html"}} />

But I am getting TypeScript error stating: (JSX attribute) render?: ((props: RouteComponentProps<any, StaticContext, unknown>) => React.ReactNode) | undefined

Is this the correct way invoking the static webpage?

Yes, I tried it it is not possible that way. That template is provided cannot be replicated — , Apr 12 '21 at 10:04
_"cannot be replicated"_? I highly doubt that, but still https://stackoverflow.com/questions/55670845/how-to-use-react-router-browserrouter-in-a-static-index-html-file — evolutionxbox, Apr 12 '21 at 10:06
Okay, I am thinking to add 403.html to public folder. Can I call it normally? — , Apr 12 '21 at 10:32

Amila Senadheera · Answer 1 · 2021-04-12T10:58:33.797

0

You can set your static HTML as innerHTML as below,

const path = require("path");
const fs = require("fs");

const loadHTML = async () => {
    const filePath = path.resolve(__dirname, 'relative', 'path', 'to', 'your', 'html');
    const html = await fs.readFile(filePath, 'utf8');
    return html;
}

<Route exact path="/error/403.html" render={() => <div dangerouslySetInnerHTML={{ __html: loadHTML()}}/> } />

edited Apr 12 '21 at 10:58

answered Apr 12 '21 at 10:43

Amila Senadheera

12,229
15
27
43

Open a static HTML in React project

1 Answers1