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?
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()}}/> } />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.