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="/" ponent={Root}>
      <IndexRoute ponent={Home} />
      <Route path="/someroute1" ponent={Route1} />
      <Route path="/someroute2" ponent={Route2} />
      <Route path="/someroute3" ponent={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 ponents, 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).

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="/" ponent={Root}>
      <IndexRoute ponent={Home} />
      <Route path="/someroute1" ponent={Route1} />
      <Route path="/someroute2" ponent={Route2} />
      <Route path="/someroute3" ponent={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 ponents, 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).

• javascript
• reactjs
• routes
• react-router
• react-router-redux

4 Answers 4

Use Route's render prop instead of ponent. That way, you can specify a function to be called instead of a ponent 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;
  }} 
/>

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

import React, { Component } from 'react'

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

That I pass like this

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

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

• Is this a remended 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

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

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

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