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

Question

I currently have a functionality that pushes users to different pages with history.push. Is it possible if the user is in the current path and decides to click the same path to re-render the current page?

Example, from the code below. If a user is in /home/reportanissue/createissue, if they decided to click the same url path, the expected behavior is to re-render the page.

Thanks

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

This behavior is easy to create by using location.pathname to match the path and window.location.reload() to refresh the page.

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

At this point, the only limitations here are design...

1. DRY up the code:

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. Simplify the pattern:

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. Avoid the switch/case all together:

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

}