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?

Aaqib · Accepted Answer · 2017-10-30 15:43:46Z

4

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()} />;
}

edited Oct 30, 2017 at 15:43

answered Oct 30, 2017 at 10:23

Aaqib

10.4k4 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raul Rulo Over a year ago

Hi Aaqib, thank you very much for your response, but It is not valid for me. I need to load the .html file, not render one React-component. I 'd want something like redirect to www.google.com but the "site" is in my project.

Dartvales · Accepted Answer · 2017-11-02 09:58:55Z

1

I think your problem it´s not related with ReactRouter... RR works in Google Chrome as well as other browsers. Look if you have the registerServiceWorker in your app because that could be the redirection error just in Chrome. If you have it and don´t use in other things just delete it.

Hope this helps you.

answered Nov 2, 2017 at 9:58

Dartvales

365 bronze badges

1 Comment

Raul Rulo Over a year ago

Yes!! it is. Thank you very much!

CharlieBrown · Accepted Answer · 2017-10-30 14:55:06Z

0

What does "Redirect" mean in your app context?

If you want to simply Link from your footer for example to those static pages, use simple HTML anchor / link tags instead of React Router Link component.

For example:

const Footer = () => 
 <div>
   <a href='/tos/terms.html'>Terms and Conditions</a>
   <Link to='/login'>Sign in</Link>
 </div>

The first link will be handled by the browser and should work fine. The second one will be handled by React Router and should match a Route in your route configuration.

If you want to really redirect, like in user visits url A but I want it to finally land on url B, then show more code. ;)

answered Oct 30, 2017 at 14:55

CharlieBrown

4,17325 silver badges24 bronze badges

4 Comments

Raul Rulo Over a year ago

Hi CharlieBrown, thank you very much for your answer. But it doesn't work for me. When I am saying redirect, I want to say the same thing that you are explaining in your answer. I want put a link that send you to /tos/terms.html and load the terms.html file. The problem about your answer is that I still have the same problem. I click in the <Link/> or <a href.../> element and index is loaded again without content, because the route is not defined in the <Switch/> component.

CharlieBrown Over a year ago

Hi Raul, it doesn't make too much sense. You're saying you can't basically use a normal a href tag for example to link to Google or prompt for an email with href=mailto:xxxx because React Router is handling everything? It seems to be that the problem is elsewhere. You could produce a small code example and we can work it out from that.

Raul Rulo Over a year ago

No, React router handling all "same-domain elements". For example: "/tos/terms.html" or "www.mydomain.com/tos/terms.html". I'll try to show more code in my next edition, but I don't know how much I can show. Thank you very much for your time.

ellockie Over a year ago

To confirm, the <a href='/tos/terms.html'>Terms and Conditions</a> (@CharlieBrown 's) solution works in my project

Collectives™ on Stack Overflow

React Router doesn`t load external html files

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related