React component tabs and URLs - reactjs

Question

I'm fairly new to React so please bare with me.
We have a list of elements which all load their own content based on a query string parameter (let's call it CustomerID) passed in to the page. When clicking on the tabs, the URL remains the same. Let's say the URL is /customer/customerid
Within one of the tabs, the user has an opportunity to click on other items relevant to this Customer, which in turn changes the URL and another id is passed into the query string, let's call it OrderID and the URL is /customer/order/orderid.
When viewing the order, I would like the customer Tab menu to still appear, but I'm not sure the best way to handle this. Should I abandon tabs, and just create some normal links that look and feel like tabs? Or should I make the menu a class that is imported into each page, passing in the CustomerID from the relevant payloads each page contains?
EDIT: to include some code as a reference:
<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}`);
}
The CustomerOrders class contains links to each individual order... Something like the following:
<Row>
<Col className="DataRowFunctions" md="2">
<Link
to={onCustomerOrderClick}
onClick={(e) => {
e.preventDefault();
onCustomerOrderClick();
}}
>
Edit
</Link>
</Col>
</Row>
Opening the order is then changing the URL, which leads me back to my question.