在同一路线内导航时发出提示

Question

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

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>
    );
  }
}

在上面的示例中，About 是一个不同的页面，因此应该在输入更改时触发，它会正确执行。但是/info路由是Home的内部路由，所以不需要提示，导航后Home的内部状态会保留，不会有任何损失。

此处的实际用例是在路线处于活动状态时显示模态，但这主要是 CSS 内容，因此我将其排除在示例之外。

Answer 1

我认为作为消息道具的回调函数正是您要找的。你可以尝试给Prompt的message prop一个回调函数。该回调将以一个对象作为参数调用，该对象将包含有关下一条路线的所有信息。

documentation 是这样说的：

message: func

Will be called with the next location and action the user is attempting to navigate to. Return a string to show a prompt to the user or true to allow the transition.

该对象有一个 pathname 属性，它是下一个路径，通过检查它可以确定该路径是否安全。这就是我要说的：

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

这里是 pen 我根据您的示例创建的工作代码。

希望对您有所帮助。

在同一路线内导航时发出提示

Prompt is made when navigating within same route

reactjs

react-router

react-router-v4