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

【问题标题】：Refresh page on this.props.history.push with same url使用相同的 url 刷新 this.props.history.push 上的页面
【发布时间】：2023-03-18 18:12:01
【问题描述】：

我目前有一个使用 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;
    }
  }

【问题讨论】：

标签： javascript reactjs react-router

【解决方案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;
    }
}

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

干掉代码：

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;
    }
}

简化模式：

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;
    }
}

同时避免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);

}

【讨论】：