Search code examples
javascriptreactjsroutesreact-routerreact-router-redux

react-router-redux redirect to absolute url


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

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 :

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


Solution

  • 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