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