react router v4 prevent to access to page - react-router

Question

In React Router v4 doc I have read about Prompt to prevent to leave a page:
Prompt to prevent to leave, but until now I have not found anything some about prevent to access like willtransitionto in older version.
any suggestion?

Answer 1

Been researching this question a while ago, so, here are examples I came with (I am not sure if it's the best way, maybe there is some better soultions, but still i want to share):
1) When you preventing access and know to which page you must redirect user to:
Let say you have Home page and About page and you want to ask user confiramtion in case the user trying to visit it.
So, in this case we just can put this logic in render property in <Route> component, like this
render={(props)=>{
if(confirm('Are you sure you want to see this page?')){
return <About />
} else {
return <Redirect to='/'/>
}
}
}
So, if the user clicks OK it will show About page, otherwise it would redirect user to Homepage
class App extends React.Component{
render(){
return(
<Router>
<div className="container">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home} />
<Route path="/about" render={(props)=>{
if(confirm('Are you sure you want to see this page?')){
return <About />
} else {
return <Redirect to='/'/>
}
}
}/>
</div>
</Router>
)
}
}
Full example is here
2) Same as in 1st example but in case you want to redirect user back on the same page from which user trying to visit About page.
In this case, to be sure that App component gets location information I wrapped it up like this:
<Router>
<Route path="/" render={
(props)=>{
return <App {...props}/>
}
} />
</Router>
And then here, in the main appliction component (App) we can keep trace of the path, like this (so, everytime an App gets new properties regarding location and stuff from ReactRouter component, we can check it and save in our state):
constructor(props){
super(props);
this.state={
prevPath: props.location.pathname
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.location !== this.props.location) {
this.setState({ prevPath: this.props.location.pathname })
}
}
And then, in case of user wants to go to the about page we can, if user not confirmed the redirect, take him back to previous page, so, render property would look like this:
<Route path="/about" render={(props)=>{
if(confirm('Are you sure you want to see this page?')){
return <About />
} else {
let toPath = '/';
if(this.state.prevPath){
toPath=this.state.prevPath
}
return <Redirect to={toPath}/>
}
}
}/>
Full example here