CODEWITHSUNDEEP
javascriptreactjsroutesreact-routerreact-router-redux
Cyril CHAPON
Cyril CHAPON

Reputation: 3747

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

Upvotes: 8

Views: 12856

Answers (4)

DPG
DPG

Reputation: 729

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

Upvotes: 5

Kaya Toast
Kaya Toast

Reputation: 5513

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

Upvotes: 3

brub
brub

Reputation: 1153

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

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

Upvotes: -2

Cyril CHAPON
Cyril CHAPON

Reputation: 3747

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

Upvotes: 3

Related Questions