打开模态并更新URL而不重新加载主页

Question

我具有primeReAteAct DataTable（它是单独的组件 InvoIcetable ，它是许多列的另一个较大的Copmonent AccountDetails ）的一部分 - 每个列都有许多列 - 每个列都有选择模式和按钮。当我单击按钮时，它将打开新的模式并更改URL。 主页的URL（ AccountDetails ）是客户/CustomerCode ，当我打开模态时（我单击 InvoIcetable的图标）它成为客户/customercode/invoiceNumber/changelog 。

问题是，当我选择任何发票并打开模式时，主页会刷新，并且未选择所选的发票。

这些是我使用的方法：

  openHistoryModal = (rowData, e) => {
    e.stopPropagation();
    this.props.history.push(`/customers/${customerCode}/number/changelog`);
  };

  discardHistoryModal = (e) => {
    this.props.history.push(`/customers/${customerCode}`);
  };

我尝试使用histor.replace和window.history.thistorate，但结果是相同的。我只使用类组件。

我也有以下路线：

              <ProtectedRoute
                path="/customers/:customerCode/"
                component={(props: any) => <AccountDetails {...props} />}
                authority={[userRoles.user]}
                feature={"Collection module"}
                rootStore={this.props.rootStore}
                exact={true}
              />
              <ProtectedRoute
                path="/customers/:customerCode/:number/changelog"
                component={(props: any) => <AccountDetails {...props} />}
                authority={
                  [userRoles.userAudit.toString()] || [userRoles.admin]
                }
                feature={"Collection module"}
                rootStore={this.props.rootStore}
                exact={true}
              />

这些是preectedRoute组件中的方法：

checkAuthority = (roles) =>{
   return this.props.rootStore.userStore.hasRoles(roles)
  }
 
  checkFeature = () => {
    let featureActive: boolean = false;
    const foundFeature =
      this.props.rootStore.managementStore.featureFlags.filter(
        (flag: { name: string; value: string; type: string }) =>
          flag.name === this.props.feature && flag.value === "true"
      );
 
    if (
      (foundFeature && foundFeature.length > 0) ||
      this.props.feature === "alwaysActive"
    ) {
      featureActive = true;
    }
 
  return featureActive
 
  };
 
  render() {
    const { component: Component, ...props } = this.props;
    return (
      <Route
        {...props}
        render={(props) =>
          this.checkAuthority(this.props.authority) && this.checkFeature() ? (
            <Component {...props} rootStore={this.props.rootStore} />
          ) : (
            <Redirect to='/404'></Redirect>
          )
        }
        exact={this.props.exact}
      />
    );

如果您能给我一些想法并帮助我，我将非常感激！