0

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.

Sami.C
  • 561
  • 1
  • 11
  • 24
  • 1
    show some code please – Cornel Raiu Nov 17 '22 at 00:27
  • @CornelRaiu I just edited to include some code snippets, not sure if it is overly useful though in terms of my question asked. – Sami.C Nov 17 '22 at 00:37
  • Are you using react-router-dom? Life would be a lot better if you do – Normal Nov 17 '22 at 00:41
  • @Normal we do... Why? – Sami.C Nov 17 '22 at 10:55
  • Since these layouts have intersections together, and since the key between the two layouts is the URL, why you don't make the outer Tabs layout in a `} />}` and the second one inside? you can play with that well if you're using react-router-dom – Normal Nov 17 '22 at 12:24
  • @Normal interesting, do you think you could send me a link to a bigger example as I'm not familiar with this? – Sami.C Nov 17 '22 at 23:11

0 Answers0