Rendering static folders for React routes

Question

I have some legacy static code (HTML, CSS, jQuery, JS, etc.) in my folder. Now I need to render these on a specific route in my react app. Due to some policy reasons, I cannot use iFrame. I don't want to rewrite it in React for two reasons:

• This is a single page containing legacy code. Not worth the effort
• This static folder is also used in other places

So, if I rewrite it in React, then I end up with two versions: one is the React version of the page, and the other is the non-React version of the page. If I want to change then I need to update twice.

What are my options? What's the easiest and less confusing way to render static files within a folder in my React app without using iFrames?

Answer 1

You can add static files in the public directory and copy the required paths using folder copy and then serve these files statically. If the route is /display, you can add a folder called display. Assuming your file is named contact.html, your file will be located under /display/contact.html.

Link to file via react

// ...
return (
  <a 
    href="/display/contact.html" 
    // if you want to open it in a new tab
    target="_blank" 
  />
);