在 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);

}