Serve Static HTML route in React App (Typescript)-CodePudding

I have a normal React app using functional components. It has its own CSS and everything works fine.

I now want to incorporate another route at /FAQ that serves a long static HTML file (FAQ) I have that has its own CSS and design that is already written for me. I don't want to incorporate that into the rest of the apps design structure, I just want the route to take the user to the new content it its own pre-designed style.

I have tried creating a new component for my FAQ that imports the statis HTML and CSS and then simply serves this component from App.tsx.

const App = () => {
 return(
   <Page>
    <FAQ>
   <Page>
 )
}

In my FAQ component I have tried using the dangerouslySetInnerHTML attribute like this to load the static HTML from the file in the Public folder:

import { FC } from "react";
import FAQContent  from "./FAQ";

const FAQ: FC = () => {

  return (
    <>
      <div 
        dangerouslySetInnerHTML={{__html: FAQContent  }}
      />
    </>
  );
};

export default FAQ;

I get a TS error stating:

Type 'FC<{}>' is not assignable to type 'string'. TS2322

Am I going about this all wrong?

CodePudding user response：

For routing in react, I suggest trying react-router, it would make your project much easier!

Also, if I remember it right, you can only pass type "string" inside dangerouslySetInnerHTML, so you can create a text file and pass the file into dangerouslySetInnerHTML or you can put FAQContent (as html string) in a constant and then pass the constant inside dangerouslySetInnerHTML.

Let me know if this works!

CodePudding user response：

To serve the static page, place it in your project's public folder. You can then link to it from a React component like so:

<a href={process.env.PUBLIC_URL   '/faq.html'} target="_blank">FAQ</a>

(process.env.PUBLIC_URL dynamically provides the location of the public folder)