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

Minorca

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

Minorca

I have tried your solution like this render{() => this.props.isLoggedIn ? <Checkout /> : <Redirect />} using the exact same dumb component for Redirect. It redirects me to the Checkout page, but before it finishes loading - I'm redirected to Redirect page. Props isLoggedIn is updated to true when I login, so it's not that. Any idea?? – Eradis

I think @KayaToast's answer is better: " You probably don't need React Router for this. The creator of React Router suggests using the <a> tag. Source: github.com/remix-run/react-router/issues/1147 " – Anetta

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

Lethia

Answer 3

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

Ecstatics

Answer 4

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

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

Lancelot

Thanks :) But it leads to myhost/http:/anotherhost/anotherroute5 – Minorca

heh- like i said untried. i just edited it, you could try pushing the location as above. – Lancelot

Hum :/ doesn't work. It displays a white window without any error in console – Minorca

It seems to do the trick inside componentDidMount, see my answer – Minorca

Right on- I unedited my bad edit- I didn't think you could call a navigation function from render(). I normally do conditional navigation stuff in sagas. For this particular use case I would handle the redirect outside the react code if possible (nginx or something). – Lancelot

I would handle the redirect outside the react code yes I did, when i reach url from the bar it's ok. But there are still the cases where <Link> are involved.. – Minorca

i think you could replace <Link> with <a> and it would hit the same external endpoints. – Lancelot

That's precisely what I'm trying to avoid. The app I inherited is much more complicated than a few <Link>, it has many places places where the Routes are loaded either by user action, code-driven events, etc. – Minorca