react-router 4.0（四）页面跳转验证提示

import React from 'react'
import ReactDOM from 'react-dom'
import {
HashRouter,
Route,
Link,
Prompt
} from 'react-router-dom'class Form extends React.Component {
constructor(){
super();
this.state = {isShow:false}
}
render(){
return(
<form onSubmit={(event)=>{
event.preventDefault()
event.target.reset()
this.setState({isShow:false})
}}>
<Prompt when={this.state.isShow} message={(location)=>{
return(
`Are you sure you want to go to ${location.pathname}`
)
}}/>
{/* Prompt组件在页面跳转时提示，message为提示信息，when为true时才会起作用 */}
<p>
显示隐藏^^^{this.state.isShow?"显示":"隐藏"}
</p>
<p>
<input size="50" placeholder="哈哈哈" onChange={(event)=>{
this.setState({isShow:event.target.value.length>0})
}}/>
</p>
<button>提交</button>
</form>
)
}
}export default class App extends React.Component {
render(){
return(
<HashRouter>
<div>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/one">第一页</Link></li>
<li><Link to="/two">第二页</Link></li>
</ul>
<Route path="/" exact component={Form}/>
<Route path="/one" render={()=><h3>One</h3>}/>
<Route path="/two" render={()=><h3>Two</h3>}/>
</div>
</HashRouter>
)
}
}ReactDOM.render(<App/>,document.getElementById("app"))