CODEWITHSUNDEEP
javascriptreactjshttp-redirectreact-router-v4
Raul Rulo
Raul Rulo

Reputation: 93

React Router doesn`t load external html files

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?

Upvotes: 8

Views: 10674

Answers (3)

Dartvales
Dartvales

Reputation: 36

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.

Upvotes: 1

Aaqib
Aaqib

Reputation: 10350

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

Upvotes: 4

CharlieBrown
CharlieBrown

Reputation: 4163

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. ;)

Upvotes: 0

Related Questions