react-router实战之Prompt确认路由跳转

1.简介

用于在离开页面之前提示用户。当您的应用程序进入应阻止用户导航的状态时（例如，表单已完成一半填充），请使用<Prompt>。

2.属性

2.1 message

提示用户尝试离开的消息。可以是字符串或者函数：
 

<Prompt message="Are you sure you want to leave?" />

  

   

    

     

    
    

     

      <Prompt
     
    
   

    

     

    
    

     

        message={
      (location, action) => {
     
    
   

    

     

    
    

     
    
      if (action === 
      'POP') {
     
    
   

    

     

    
    

     
      
      console.log(
      "Backing up...")
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    
      return location.pathname.startsWith(
      "/app")
     
    
   

    

     

    
    

     

            ? 
      true
     
    
   

    

     

    
    

     

            : 
      `Are you sure you want to go to ${location.pathname}?`
     
    
   

    

     

    
    

     

        }}
     
    
   

    

     

    
    

     

      />
     
    
  

• 当message为一个函数时，参数为要跳转的路由location对象与路由动作，如刷新页面为POP，普通跳转为PUSH
• 返回true代表允许跳转，返回字符串代表询问消息

2.2 when

可以有条件地渲染<Prompt>它，而可以通过when={true