在同一路线内导航时提示

时间:2017-05-05 05:55:15

标签: reactjs react-router react-router-v4

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

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内容,所以我将其从示例中排除。

1 个答案:

答案 0 :(得分:4)

我认为回调函数作为消息道具是你在寻找什么。您可以尝试向Prompt的消息道具提供回调函数。将使用对象作为参数调用该回调,该参数将包含有关下一个路由的所有信息。

这是documentation所说的:

  消息:func

     

将调用下一个位置并执行操作   用户正试图导航到。返回一个字符串以显示提示   用户或true表示允许转换。

该对象具有pathname属性,通过检查它是下一个路径,您可以确定路径是否安全。这就是我所说的:

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

以下是pen,其中包含我从您的示例中创建的工作代码。

希望它有所帮助。