在相同路徑內導航時提示

對於頁面具有內部路由的用例，即使在導航到可能不需要提示的內部路由時，也會觸發提示，請參閱代碼示例。有沒有辦法在導航到已知安全路線時禁用提示？在相同路徑內導航時提示

import React, {Component} from 'react'; 
import {BrowserRouter, Route, Switch, Link, Prompt} from 'react-router-dom'; 

export default class App extends Component { 
    render() { 
    return (
     <BrowserRouter> 
     <Switch> 
      <Route component={About} path={"/about"}/> 
      <Route component={Home} path={"/"}/> 
     </Switch> 
     </BrowserRouter> 
    ); 
    } 
} 

class Home extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {input: 'hello?'} 
    } 

    render() { 
    return (
     <div> 
     <h1>Home</h1> 
     <input value={this.state.input} 
      onChange={(e) => this.setState({input: e.target.value})}/><br /> 
     <Link to={"/info"}>More Info</Link><br /> 
     <Link to={"/about"}>About Page</Link><br /> 

     {/*Triggers even when going to /info which is unnecessary*/} 
     <Prompt message="Move away?" when={this.state.input !== 'hello?'}/> 
     <Route path={"/info"} component={Info}/> 
     </div> 
    ); 
    } 
} 

class About extends Component { 
    render() { 
    return (
     <h1>About page</h1> 
    ); 
    } 
} 

class Info extends Component { 
    render() { 
    return (
     <p>Here be some more info</p> 
    ); 
    } 
}

在上面的例子中，關於是一個不同的頁面，因此，當輸入已經改變應該觸發，它正確地做。但是/ info路由是Home的內部路由，所以不需要提示，導航後Home的內部狀態會被保留，所以不會丟失任何內容。

這裏的實際使用案例是在路由處於活動狀態時顯示模式，但主要是CSS內容，所以我將它排除在示例之外。

來源

2017-05-05 Karagoth

我認爲一個回調函數作爲消息道具是你在找什麼。您可以嘗試給Prompt的消息道具提供回調函數。該回調函數將以一個對象作爲參數調用，該對象將包含有關下一個路由的所有信息。

這是documentation說一下：

消息：FUNC

將與下一個位置和行動用戶試圖瀏覽到被調用。返回一個字符串以顯示提示用戶或true以允許轉換。

該對象具有pathname屬性，通過檢查它可以確定路徑是否安全。以下是我在談論：

<Prompt message={(params) => 
     params.pathname == '/about' ? "Move away?" : true } />

這裏是pen有工作我已經從你的例子創建的代碼。

希望它有幫助。

來源

2017-05-05 07:28:33 sehrob

愚蠢的我，一定是錯過了那部分文檔。謝謝！它的確解決了我的問題。 – Karagoth

在相同路徑內導航時提示

回答

相關問題