Using routing in react from one module to another

I have added a new module in my application, but now I would like to navigate from one module to another one,

so the main link is "localhost/web"

I have a search component, so when I search for an item, I get the following link :

"localhost/web/search#/itemname"

What I would like to achieve is : From a new module where there is a new feature and new link: "localhost/web/medialists" which has items. So I would like to be able to navigate to search module by passing the itemname:

Should I use history, useNavigate ? I am confusing.

How do you think I can get it to work ?

My component:

  return (
                   <ClayList.Item flex key={index}>
                      <BrowserRouter>
                        <Link  aria-label= 
          {t('item.lnkRecord.label')}
                                className="col-md-10 my-lists- 
              card-details-link"
                              title={t('item.lnkRecord.title')}
                              to={searchResultPage}
                        >
                            <ClayList.ItemField expand>

                                <div className="card-row">
                                    {entity.almaId && 
                                       entity.contextId &&
                                        <div className="arena- 
                                        search-result-card autofit-col">
                                            {formatImage(image, entity.name, classNames(
                                                'arena-item-image', 'card-item-first',
                                            ))}
                                        </div>
                                    }

                                    <div className="autofit-col autofit-col-expand autofit-col-gutters">
                                        <section className="autofit-section">
                                            <h3 className="card-title text-truncate">{entity.name}</h3>

                                            {entity.contributor && (
                                                <ClayCard.Row className="arena-field-contributor">
                                                    <ClayCard.Row className="arena-field-published-edition">
                                                        <ClayCard.Description displayType="title">
                                                            {MiscUtil.recordValues(entity.contributor, 'author')}
                                                        </ClayCard.Description>
                                                    </ClayCard.Row>
                                                </ClayCard.Row>
                                            )}

                                            {entity.id && (
                                                <ClayCard.Row className="arena-field-published-edition">
                                                    <ClayCard.Description displayType="title">
                                                        {entity.id}
                                                    </ClayCard.Description>
                                                </ClayCard.Row>
                                            )}
                                        </section>
                                    </div>
                                </div>
                            </ClayList.ItemField>
                        </Link>
                    </BrowserRouter>

                    <ClayList.ItemField className="col-md-2">
                        <ClayButton displayType="unstyled"
                                    onClick={() => onClickDeleteItem(sourceId, entity.id)}>
                            {t('item.delete.button.title')}
                        </ClayButton>
                    </ClayList.ItemField>
                </ClayList.Item>
            )
        })}

    </React.Fragment>
);

};