在 React 项目中打开一个 static HTML

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 (JSX attribute) render?: ((props: RouteComponentProps<any, StaticContext, unknown>) => React.ReactNode) | undefined

Is this the correct way invoking the static webpage?

Answer 1

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()}}/> } />