如何提醒用户 React npm 模块库中未保存的更改？答案

【问题标题】：How to alert user about unsaved changes in a React npm module library?如何提醒用户 React npm 模块库中未保存的更改？
【发布时间】：2020-11-20 05:19:44
【问题描述】：

在我的一个组件在 React npm 模块库（项目之间共享的库）中，我需要提醒用户未保存的更改，这意味着，我必须在组件卸载。

我做了很多研究，唯一可能的方法是使用路由器（使用类似或 setRouteLeaveHook，因为 SPA 不会卸载页面以在页面之间导航。

由于 npm 模块并不真正拥有组件（使用这些模块的 React 项目拥有它），所以与 Router 相关的任何操作似乎都会产生如下所示的错误：

Error: Invariant failed: You should not use "anything-router-related" outside a <Router>

有没有什么方法可以在不使用 react-router 在 React npm 模块库中的情况下提醒用户未保存的更改？或者如何在 react npm 模块库中正确使用 react 路由器？

【问题讨论】：

标签： reactjs react-router node-modules

【解决方案1】：

显然，可以在 react-router-dom 的 BrowserRouter 中嵌套 Router，您需要做的就是将来自 BrowserRouter 的 history 属性传递给 react-router-dom 的 Router。我搜索了一下，似乎没有人提到可以在路由器中嵌套路由器。

对于实现库的应用：

render() {
return (
  <div className="App">
    <BrowserRouter>
      <div>
        <TopNav />
        <div style={{ margin: 30 }}>
          <Library history={this.props.history} />
        </div>
      </div>
    </BrowserRouter>
  </div>
)
}

对于图书馆，获取传递的历史道具。现在，Alert User Unsaved Changes Prompt 可以在 react-npm-module-library 中处理：

render() {
if (this.props.data) {
  return (
    <Router history={this.props.history}>
       <Prompt when message='Are you sure you want to leave?' />
    </Router>
  )
}
}

【讨论】：