React 组件选项卡和 URL

问：

我是 React 的新手，所以请和我一起裸露。

我们有一个元素列表，这些元素都根据传递到页面的查询字符串参数（我们称之为 CustomerID）加载自己的内容。单击选项卡时，URL 保持不变。假设 URL 是 /customer/customerid

在其中一个选项卡中，用户有机会单击与此客户相关的其他项目，这反过来又会更改 URL，并将另一个 id 传递到查询字符串中，我们将其称为 OrderID，URL 为 /customer/order/orderid。

查看订单时，我希望客户选项卡菜单仍然显示，但我不确定处理此问题的最佳方法。我应该放弃标签，而只创建一些外观和感觉像标签的普通链接吗？或者我是否应该将菜单设置为导入到每个页面中的类，从每个页面包含的相关有效负载中传入 CustomerID？

编辑：包含一些代码作为参考：

  <Formik
    initialValues={customer}
    enableReinitialize={true}
    validationSchema={validationSchema}
    onSubmit={handleFormSubmit}>
    {({ isSubmitting, values }) => (
      <FormikForm autoComplete="off">
        <AppCard>
          <Tabs defaultActiveKey="details">
            <Tab eventKey="details" title="Details">
              <Row>
                <Col md>
                  <InputText name="firstName" label="First Name" />
                </Col>
                <Col md>
                  <InputText name="lastName" label="Last Name" />
                </Col>
              </Row>
            </Tab>
            <Tab eventKey="orders" title="Orders">
              <CustomerOrders
                onCustomerOrderClick={onCustomerOrderClick}
                customerId={customer.customerId}/>
            </Tab>

          </Tabs>
        </AppCard>
      </FormikForm>
    )}
  </Formik>

  function onCustomerOrderClick(orderId: any){
    history.push(`/customer/order/edit/${orderId}`);
  }

CustomerOrders 类包含指向每个单独订单的链接...如下所示：

   <Row>
      <Col className="DataRowFunctions" md="2">
      <Link
        to={onCustomerOrderClick}
        onClick={(e) => {
          e.preventDefault();
          onCustomerOrderClick();
        }}
      >
       Edit   
      </Link>
      </Col>
</Row>

打开订单就是更改 URL，这让我回到了我的问题。