QueryStore

[foxtrotkilomike]

https://github.com/Belocherkovec/Lalasia-E-commerce/blob/74e8012cbb2dc214cff3edf7b2beadde9044931d/src/components/Root/Root.tsx#L7

[foxtrotkilomike]

Сейчас при запуске сразу ошибка — useNavigate() may be used only in the context of a <Router> component. У тебя <QueryStoreProvider> находится выше в дереве компонентов, чем RouterProvider, внутри QueryStoreProvider ты используешь useNavigate, хотя этот хук там не доступен, его как раз предоставляет RouterProvider.

Поэтому сперва нужно перенести QueryStoreProvider под RouterProvider, например добавить его в App компонент:

const App = () => {
  return (
    <QueryStoreProvider>
      <Header />
      <PageContent isHasBg>
        <Outlet />
      </PageContent>
    </QueryStoreProvider>
  );
};

Но это не единственная проблема. Ещё не работает переход в деталку продукта. Всё из-за этого хука в компоненте Pagination:

  // component unmounting
  useEffect(() => {
    const initialPage = queryStore.getQueryParam('page');
    if (initialPage) {
      pagination.page = +initialPage;
    }
    return () => {
      queryStore.setQueryParam('page');
    };
  }, []);

тут в cleanup function происходит дополнительная навигация по результатам установки квери параметра (зачем?), из-за чего после перехода на страницу продукта идет снова навигация, только назад в каталог. Нужно убрать этот return.

Но вообще глобально я бы изменил структуру сторов твою. QueryStore не должен быть глобальным, потому как он имеет значение только в рамках конкретной страницы. Пример — он нужен на странице каталога для пагинации и пр., но на странице продукта — не нужен. Поэтому имеет смысл его создать внутри стора страницы каталога.

Аналогично с пагинацией, я бы создал стор пагинации внутри стора страницы каталога, а дальше прокидывал бы поле с этим стором уже внутрь пагинации. Вся работа с квери параметрами происходила бы внутри стора каталога, и никаких useEffect не понадобится. Логику всю надо стараться держать внутри сторов, а не внутри UI компонентов, это общее правило.

Сейчас перед защитой переделывать архитектуру уже не стоит, но в целом рассказываю альтенративный подход к реализации, более надежный, простой в дальнейшей поддержке.