在路由变更时拦截弹出提示框让用户确认

• 在需要页面退出监听的页面增加<Prompt>组件进行拦截

//myPage.jsx
import { Prompt } from 'react-router-dom';

class MyPage extends React.Component {
  return (
    <>
      <Prompt message={() => '有修改尚未保存，确定要离开页面吗？'} />
      <section>页面内容</section>
    </>
  )
}

• 在路由处增加对退出事件的监听响应

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, Switch } from 'react-router-dom';
import myPage from 'myPage.jsx'

const getConfirmation = (message, callback) => {
  //这里可以自定义样式来让用户做出选择，结果通过callback返回
  Modal.confirm({
    title: message,
    onCancel: () => {
      callback(false);
    },
    onOk: () => {
      callback(true);
    },
  });
};

const BasicRoute = () => (
    <HashRouter getUserConfirmation={getConfirmation}
        <Switch>
          <Route exact path='/page1'  component={myPage}/>
          <Route exact path='/page2' />
          <Route exact path='/page3' />
        </Switch>
    </HashRouter>
);

ReactDOM.render(<BasicRoute />, document.getElementById('main-view'));

相关文件引用及推荐

• 利用Prompt，阻止react路由切换，弹窗确认，并且自定义弹窗样式
  [https://www.haowuliaoa.com/article/info/635201.html)