reactjs - React Router Prompt，提示仅针对特定 url 进行重定向

Question

我正在尝试使用提示来阻止用户意外地从具有未保存更改的页面重定向，其实现相当简单；

<Prompt when={this.state.changesMadeToDesign}
        message="Are you sure you want to abandon your changes?"
    />

这很棒，唯一的问题是当用户更改“设计”时，他们会被重定向到工作室页面。这意味着在他们进行了一次更改后，他们会在每次重定向（“/studio/manage”、“/studio/add”等）时收到提示，这非常烦人，我只希望它在用户完全离开 /studio 页面。

我尝试只在componentWillUnmount主工作室页面上的状态更改上呈现提示，但它必须在它生效之前卸载，因为它不起作用，我还检查了所有重载道具的提示，但似乎没有有什么可以帮助我的，这一定是以前出现过的，这似乎是很常见的功能，有没有办法实现这个，有或没有提示？

标签： reactjsreact-routerreact-router-v4

Answer 1

我也遇到过这个问题，基本上我所做的就是将此shouldBlockNavigation变量存储在组件之外，即存储或上下文中，这是根据需要打开或关闭的布尔值。如果对设计进行了更改，您的更改触发器将切换为 true，如果 url 已经更改（即history.listen函数），则切换为 false。