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

目前，这里的唯一限制是设计...

干燥代码：

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

}

使用相同的网址刷新this.props.history.push上的页面

1 个答案: