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