React Router下模态框点击关闭返回上页失效问题求助

结合你的React 16.8.2和react-router-dom 4.3.1环境，我给你几个针对性的解决方案，应该能帮你搞定这个问题：

1. 用withRouter确保拿到正确的history对象 #

因为react-router-dom 4.3.1还没推出useHistory这类Hook（Hook是从5.1.0版本才引入的），函数式组件需要通过withRouter高阶组件来获取有效的路由历史对象：

import React from 'react';
import { withRouter } from 'react-router-dom';
import Modal from '你的Modal组件路径';

const YourModalComponent = (props) => {
  const onCancel = () => {
    props.history.goBack();
  };

  return (
    // 注意：open={true}后面的逗号要删掉，语法错误可能导致事件绑定失效
    <Modal open={true} onClose={onCancel}></Modal>
  );
};

// 用withRouter包裹组件后导出，确保能拿到正确的history
export default withRouter(YourModalComponent);

2. 确认打开模态框的路由跳转方式 #

如果打开模态框时你用的是history.replace()而不是history.push()，路由栈里不会保留上一页的记录，goBack()自然就失效了。点击菜单项打开模态框时，一定要用push方法：

// 菜单项的点击事件处理函数
const openModal = () => {
  props.history.push('/你的模态框专属路由');
};

3. 手动记录上一页路径，直接跳转替代goBack() #

如果上面的方法还是没效果，你可以在打开模态框时把当前页面路径存在路由state里，关闭时直接跳转到这个记录的路径：

打开模态框时： #

const openModal = () => {
  // 将当前页面路径存入路由state的from字段
  props.history.push('/你的模态框路由', { from: props.location.pathname });
};

关闭模态框时： #

const onCancel = () => {
  // 取出之前记录的路径，没有的话跳转到首页（或你指定的默认页面）
  const prevPath = props.location.state?.from || '/';
  props.history.push(prevPath);
};

4. 检查Modal组件的事件绑定语法 #

你代码里<Modal open={true}, onClose={onCancel}>有个多余的逗号，这属于语法错误，可能导致onClose事件没正确绑定，记得删掉这个逗号。

内容的提问来源于stack exchange，提问作者techie_questie