在 this.props.history.push 上刷新页面，使用相同的 url

Question

我目前有一个功能，可以通过 history.push 将用户推送到不同的页面。 如果用户在当前路径中并决定单击相同的路径以重新呈现当前页面，是否有可能？

例如，来自下面的代码。 如果用户在 /home/reportanissue/createissue 中，如果他们决定单击相同的 url 路径，则预期的行为是重新呈现页面。

谢谢

handleMenuItemClick(event) {
    switch (event.currentTarget.id) {
      case "mainPage":
        this.props.history.push("/home/reportanissue");
        break;
      case "myTasks":
        this.props.history.push("/home/reportanissue/managemytasks");
        break;
      case "myQueues":
        this.props.history.push("/home/reportanissue/myqueues");
        break;
      case "createNewIssue":
        this.props.history.push("/home/reportanissue/createissue");
        break;
      case "submitException":
        this.props.history.push("/home/reportanissue/submitnewexception");
        break;
      default:
        return;
    }
  }

Answer 1

通过使用location.pathname匹配路径并使用window.location.reload()刷新页面，可以轻松创建此行为。

handleMenuItemClick(event) {
    switch (event.currentTarget.id) {
      case "mainPage": {
        if (this.props.location.pathname === "/home/reportanissue") {
          window.location.reload();
          break;
        }
    
        this.props.history.push("/home/reportanissue");
        break;
      ...
      default:
        return;
    }
}

在这一点上，这里唯一的限制是设计......

1. 干掉代码：

const PATH_LINKS = {
  mainPage: "/home/reportanissue",
  myTasks: "/home/reportanissue/managemytasks",
  ...
}

handleMenuItemClick(event) {
    const { history, location } = this.props;
    const key = event.currrent.target.id;
    
    switch (key) {
      case "mainPage": {
        if (location.pathname === PATH_LINKS[key]) {
          window.location.reload();
          break;
        }
    
        history.push(PATH_LINKS[key]);
        break;
      case "myTasks": {
        if (location.pathname === PATH_LINKS[key]) {
          window.location.reload();
          break;
        }
    
        history.push(PATH_LINKS[key]);
        break;
      default:
        return;
    }
}

2. 简化模式：

const PATH_LINKS = {
  mainPage: "/home/reportanissue",
  myTasks: "/home/reportanissue/managemytasks",
  ...
}

handleMenuItemClick(event) {
    const { history, location } = this.props;
    const key = event.currrent.target.id;
    
    switch (key) {
      case "myPage":
      case "myTasks": {
        if (location.pathname === PATH_LINKS[key]) {
          window.location.reload();
          break;
        }
    
        history.push(PATH_LINKS[key]);
        break;
      default:
        return;
    }
}

3. 一起避免switch/case ：

const PATH_LINKS = {
  mainPage: "/home/reportanissue",
  myTasks: "/home/reportanissue/managemytasks",
  ...
}

handleMenuItemClick(event) {
    const { history, location } = this.props;
    const key = event.currrent.target.id;

    if (location.pathname === PATH_LINKS[key]) {
      return window.location.reload();
    } else if (PATH_LINKS[key]) {
      return history.push(PATH_LINKS[key]);
    }

    console.error("The following path does not exist :", key);

}