How can I redirect to an absolute path with react-router v4?

Unfortunately this isn't possible. If you're using a basename it will be added to base of every path before the href is created. This happens in the history module in createBrowserHistory in the push and replace methods which use the following function:

var createHref = function createHref(location) {
    return basename + (0, _PathUtils.createPath)(location);
};

uses either push or replace method.

You can find the following block of code in the Redirect.prototype.perform method:

if (push) {
  history.push(to);
} else {
  history.replace(to);
}

The above can be found in Redirect.js in the react-router module which is what the react-router-dom module imports and then exports.

To do what you're trying to do I would make the basename a const and added it to the front of your path in each of your routes.

It's unfortunate there is not an ignoreBasename option for a <Route /> or <Redirect />, though it is implementable.


As mentioned in Kyle's answer, there is no way to have to use absolute urls or to ignore the basename; however, if you want or "need" to run the redirection from the render method of your component you can create your own ultra-light "absolute redirect" component, here's mine:

import React from 'react'

class AbsoluteRedirect extends React.Component {

    constructor(props){
        super(props)
    }

    componentDidMount(){
        window.location = this.props.to
    }

    render(){
        return null
    }

}

export default AbsoluteRedirect

And then use it other components with a condition so it only gets mounted when your validation is true.

render(){ 

    if( shouldRedirect )
        return <AbsoluteRedirect to={ anotherWebsiteURL } />

    ...

}

Hope this helps :)