[React Router] Prevent Navigation with the React Router Prompt Component

转载于 2018-04-05 03:12:00 发布 · 37 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/8721046.html

文章标签：

#javascript #ViewUI

本文介绍如何使用 React Router 的 Prompt 组件来控制导航。通过静态消息和动态方法实现导航提示，展示了如何根据状态变化动态允许或阻止页面跳转。

In this lesson we'll show how to setup the Prompt component from React Router. We'll prompt with a static message, as well as a dynamic method with the message as a function. Finally we'll show that you can return true from the message as a function to dynamically allow navigation.

import React, { Component } from "react";
import { Prompt } from "react-router-dom";

class Profile extends Component {
  state = {
    name: "",
  };
  render() {
    return (
      <div>
        <Prompt
          when={!!this.state.name} <!-- Tell prompt should happen -->
          message={location => `Are you sure you want to go to ${location.pathname}`} <!-- if return string, then prompting, if return true, then allow-->
        />
        <div>
          <div>Nice looking profile! What's your name?</div>
          <input value={this.state.name} onChange={e => this.setState({ name: e.target.value })} />
        </div>
      </div>
    );
  }
}

export default Profile;