在相同路径内导航时提示

对于页面具有内部路由的用例，即使在导航到可能不需要提示的内部路由时，也会触发提示，请参阅代码示例。有没有办法在导航到已知安全路线时禁用提示？在相同路径内导航时提示

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

在相同路径内导航时提示

回答

相关问题