react-router-dom示例讲解（五）——阻止导航

前言：

这个例子主要讲的是Prompt组件的用法。该组件主要用于用户离开当前页面时给出提示。

属性有：

message：当用户离开当前页时设置的提示信息；其可以时一个字符串也可以是一个函数；如下：

<Prompt message="确定要离开？" />

<Prompt message={location => (
  ` 确定要离开${location.pathname}`
)} />

when：boolean值，满足条件则启用Prompt；

实现效果：

代码如下：

import {
  BrowserRouter as Router,
  Route,
  Link,
  Prompt
} from 'react-router-dom';

class App extends Component {
  render () {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/home">Home</Link>
            </li>
            <li><Link to="/about">About</Link></li>
          </ul>
          <hr />
          <Route path="/home" component={Home}/>
          <Route path="/about" component={About}/>
        </div>
      </Router>
    )
  }
}

class Home extends Component{
  render() {
    return (
      <h1>
      {/*Prompt location为什么可以用？*/}
        Home
        <Prompt when={true} message={location => (
          `Are you sure you want to go to ${location.pathname}`
        )}/>
      </h1>
    )
  }
}

倘若你还不理解请参考我的github上的这个示例：https://github.com/guoqin721/react-router-dom5