React-Router 和 React-Router-dom 的区别

react-router 提供了路由核心api。如Router, Route, Switch等，但没有提供有关dom操作进行路由跳转的api

react-router-dom 提供了 BrowserRouter、Route、Link 等 api，可以通过 dom 操作触发事件控制路由。
Link组件，会渲染成一个 a 标签；BrowserRouter和hashRouter组件，前者使用pushState和popState事件构建路由，后者使用 hash 和 hashchange 事件构建路由

react-router-dom 中依赖了 react-router，所以安装的时候只要安装 react-router-dom

几种离开当前页面的方式

  1. 关闭当前标签页，通过监听 window.beforeUnload 事件
  2. 通过a标签跳转(+前端路由)， 可以引入 React-router 的 <Prompt>组件
  1. /**
  2.  * 使用react-router中离开确认组件Prompt来监听react中用户离开当前页面的操作
  3.  * 引入Prompt
  4. */
  5. import {Prompt} from 'react-router';
  7. /**
  8. * 当前Page返回的render中写上:
  9. */
  10.   <Prompt message={() => {
  11.     //写判断逻辑等代码
  12.         return true;//返回true标示离开当前页面;false表示留在当前页面
  13.     }
  14. }></Prompt>

Prompt 组件支持的参数也比较简单：

  • message:
    • string, 设置Prompt提示内容
    • function, 此时返回的参数分别为true/false，即bool类型；返回 false就继续停留在当前页面，返回true则跳转当前页面。
  • when：设置是否启用Promp功能，比如正常保存完之后跳转到列表页或者当前页面内容未更改时，就不需要确认是否要离开

判断是否需要跳转

使用antd Modal 组件，以及 loadsh 的deepclone(深拷贝)， _.isEqual(value, other) 执行深比较来确定两者的值是否相等。