react-router-redux redirect to absolute url

Question

I'm migrating a react application and I'm trying to split it. Basically, I would like to redirect some client-side react routes to absolute urls (or relative, but at least go with a server roundtrip, where reverse proxying is done)

Note that

• react-router 3.0.0
• react-router-redux 4.0.7
• The app have these urls
  • http://myhost/ => homepage
  • http://myhost/someroute1 => a first route
  • http://myhost/someroute2 => a second route
  • http://myhost/someroute3 => a third route

Everything is inside react right now.

Routing looks like this :

<Provider store={store}>
  <Router history={history}>
    <Route path="/" component={Root}>
      <IndexRoute component={Home} />
      <Route path="/someroute1" component={Route1} />
      <Route path="/someroute2" component={Route2} />
      <Route path="/someroute3" component={Route3} />
    </Route>
  </Router>
</Provider>

The goal is to redirect, say, routes "/" and "/someroute2" to static urls (server urls). As so :

• http://myhost/ => http://anotherhost/
• http://myhost/someroute1 => keep react routing
• http://myhost/someroute2 => http://anotherhost/anotherroute5
• http://myhost/someroute3 => keep react routing

The question is simple : is is possible to replace, in a clean way, a react router route with an absolute url ?

I heard about Redirect and IndexRedirect components, but I can't figure how to use it properly, and, due to a lack of react / react-router, I can't figure if there would be any dangerous side-effects (in history for example).

Answer 1

Partially based on @brub answer, I've found a solution using a dumb component.

import React, { Component } from 'react'

export default class MyRedirectRoute extends Component {
  componentDidMount() {
    window.location.href = //my url here
  }
  render() {
    return null
  }
}

That I pass like this

<Route path="/someroute3" component={MyRedirectRoute} />

Though, I'm still not aware of a few things :

• Is this a recommended solution ?
• Are there any history side-effect ?
• Is there any better (more react-router) solution than window.location.href ? I tried this.context.history without any success...

I'm waiting for feedback / better solution before accepting my own answer

Answer 2

Use Route 's render prop instead of component . That way, you can specify a function to be called instead of a component to be instantiated. In the function, perform the navigation the old-fashioned way, using window.location.href :

<Route 
  path="/someroute2" 
  render={() => {
    window.location.href = "http://anotherhost/anotherroute5";
    return null;
  }} 
/>

Answer 3

You probably don't need React Router for this. The creator of React Router suggests using the <a> tag.

Answer 4

I haven't tried it but syntactically you could do it like this:

<Route 
 path="/someroute2" 
 render={() => <Redirect to="http://anotherhost/anotherroute5" />} 
/>