React Router doesn`t load external html files

Question

I am building a React App with react + react-router, but I have a problem about the redirections.

I have the next folder structure:

... /public /index.html (react index) /tos/ /terms.html /privacy.html ... /src index.js App.js ...

And the index.js:

class App extends Component {

    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/settings" component={Settings}/>
                </Switch>
            </Router>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'));
registerServiceWorker();

The problem is when I want redirect to /public/tos/terms.html or /public/tos/privacy.html, sometimes (more frequently in chrome), I can not. The project render again the index, and show a blank page because the route /public/tos/terms.html or /public/tos/privacy.html is not declared in the Route Switch.

On the other hand, I have other "no-react" project in the same base_url, but listen in other port www.my-project.com:4040/other and I have configured it in the next route: www.my-project.com/other. But in this case, I have the same problem, when I redirect from my React-app to this route, react do no redirect and render again the App.js without components inside.

Somebody could tell me any way for redirect to other place in the same project but out of react?

Answer 1

If your trying to reach valid url /public/tos/terms.html you must have component to take care of the url :

<Route  path="/public/tos/terms" component={/*Component to render*\ }/>

So it will be like :

        <Router>
          <div>
            <Switch>
                <Route path="/settings" component={Settings}/>
                <Route  path="/public/tos/terms" component={/*Component to render*\ }/>
                <Route exact path="/" component={Home}/>
            </Switch>
          </div>
        </Router>

If you are looking for how you can include your external files as a components inside your reactjs then one of the ways is , sending get request using axios and then you can use it as dangerouslySetInnerHTML ,

function getExternalFile(fileName) {
   const request = axios.get('/myAPI/getExternalFile/' + fileName).then(
    respone =>
     {this.setState({externalFile: response})}); }

function MyComponent() {
  return <div dangerouslySetInnerHTML={getHTMLFile()} />;
}