Как скрыть пагинацию при открытии другого компонента?

У меня есть приложение которое состоит из хедера, списка некоторых валют и пагинации. Когда пользователь нажимает на валюту из списка, ему открывается страница с ее подробным описанием. На странице с описанием валюты есть хедер, основной блок с подробным описанием и пагинация. Но мне нужно чтоб на странице с подробным описанием пагинация исчезала, как это сделать ? Я попытался в css файл компонента с подробным описанием добавить .pagination{visibility:hidden}, но пагинация исчезла и с основной страницы. Можно было бы компонент с пагинацией испортировать в компонент с подробным описанием и убрать его с роутинга из App но переменные не позволяют. Мой роутинг в App выглядит так:

<div className="App">
      <Navbar value={value} handleChange={handleChange} />
      <Routes>
        <Route path="/" element={<Currencies currencies={currentCurrency} />} />
        <Route path="/currency" element={<Currency />}>
          <Route path=":currencyId" element={<Currency />} />
        </Route>
      </Routes>
      <Pagination
        currenciesPerPage={currenciesPerPage}
        totalCurrencies={currencies.length}
        paginate={paginate}
        currentPage={currentPage}
      />
    </div>