Search code examples
reactjsiframereact-router

iFrame is loading index.html instead of local html file specified in the src

I have a React project which consists of many pages.

One page contains an iframe that must load a local HTML file. Instead of that, it loads index.html file (homepage).

I am using "react-router-dom" for route and links.

I think the problem is with redirecting the link of the HTML file to the homepage file.

If this is the problem, how I can disable redirecting to the homepage when calling the desired HTML file?

Edit:

The HTML file is a part of a third-party SDK bundle and can't be converted to a react component.

Solution

  • If the file is a third party library

    Consider putting it in the public directory and using PUBLIC_URL to access the file.

    <iframe src=`${process.env.PUBLIC_URL}/bundle/test.htm` ... />

    If you need to load another component

    Load the component that renders the page directly instead of doing an iframe. That way you are not constrained to path based rules.

    If you want path based rules

    Consider adding a nested route: https://v5.reactrouter.com/web/example/nesting

    Or v6 route: https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

    Prefer not to intentionally break react-router but work within its constraints.

    I would recommend putting an absolute path if it was an external route; however, since it is an internal link it will still conform to react router. Or use public folder.