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