Javascript 当我单击<；链接>；，我想在react router v4.x中设置confrm模式，然后再运行

当我单击链接时，我想显示一个模式，询问用户是否真的想进行更改。 如果他们点击“是”，我想继续重定向到其他页面

这是我的密码：

import { Modal } from 'antd';
import { Link } from 'react-router-dom';
import React from 'react';
const confirm = Modal.confirm;


class Menu extends CLComponent {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.showModal = this.showModal.bind(this);
    this.confirmChange = this.confirmChange.bind(this);
  }


  linkClick (e) {
    let hashValue = e.target.getAttribute("href");
    e.preventDefault();
    e.stopPropagation();
  }

  showModal (url) {
    const that = this;
    confirm({
      title: 'Sure leave?',
      content: "Are you sure to leave this page?",
      onOk() {
        that.confirmChange(url);
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  confirmChange () {
    location.hash = e;
  }

  render() {
    return (
      <div>
        <Link onClick={ this.linkClick } to={"/test"}>test</Link>
      </div>
    );
  }
}

从“antd”导入{Modal}；
从'react router dom'导入{Link}；
从“React”导入React；
const confirm=Modal.confirm；
类菜单扩展了CLComponent{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
this.showmodel=this.showmodel.bind（this）；
this.confirmChange=this.confirmChange.bind（this）；
}
点击链接（e）{
让hashValue=e.target.getAttribute（“href”）；
e、 预防默认值（）；
e、 停止传播（）；
}
showModal（url）{
常数=this；
证实({
标题：“确定离开吗？”，
内容：“您确定要离开此页面吗？”，
onOk（）{
.confirmChange（url）；
},
onCancel（）{
console.log（'Cancel'）；
},
});
}
确认更改（）{
location.hash=e；
}
render（）{
返回(
测试
);
}
}

---

虽然我成功了，但我觉得很糟糕。有没有办法更改我的代码？

您可以使用

react router redux

中的

push

在确认时推送位置

以下是一个例子：

import {connect} from "react-redux";
import {push} from "react-router-redux";
...
showModal (url) {
  const that = this;
  confirm({
    title: 'Sure leave?',
    content: "Are you sure to leave this page?",
    onOk() {
      this.props.dispatch(push(url));
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}
...

---

将链接转换为按钮并使用react路由器历史记录。按（路径）转到其他位置

import { Modal } from 'antd';
import { Link, withRouter } from 'react-router-dom'; //use withRouter HOC in case this is not a direct child of Route or in case u do not have access to history prop
import React from 'react';
const confirm = Modal.confirm;

class Menu extends CLComponent {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.showModal = this.showModal.bind(this);
    this.confirmChange = this.confirmChange.bind(this);
  }


  linkClick () {
  const that = this;
   confirm({
      title: 'Sure leave?',
      content: "Are you sure to leave this page?",
      onOk() {
        that.props.history.push('/test');
      },
      onCancel() {
        console.log('Cancel');
      },
    });


  }
  render() {
    return (
      <div>
        <button onClick={ this.linkClick }>test</button>
      </div>
    );
  }
}
export default withRouter(CLComponent) 

从“antd”导入{Modal}；
从“react router dom”导入{Link，withRouter}//如果这不是路由的直接子级，或者如果您无权访问历史记录，请与Router HOC一起使用
从“React”导入React；
const confirm=Modal.confirm；
类菜单扩展了CLComponent{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
this.showmodel=this.showmodel.bind（this）；
this.confirmChange=this.confirmChange.bind（this）；
}
链接单击（）{
常数=this；
证实({
标题：“确定离开吗？”，
内容：“您确定要离开此页面吗？”，
onOk（）{
that.props.history.push（'/test'）；
},
onCancel（）{
console.log（'Cancel'）；
},
});
}
render（）{
返回(
测试
);
}
}
使用路由器导出默认值（CLComponent）

检查此项