React Hooks поисковый ввод, нажатие клавиши, ввод страницы результатов перенаправления

Вот демонстрация того, как работает Песочница. Конечно, вам потребуется рефакторинг кода.

Идея заключается в том, что вам нужно передать искомое слово в параметре запроса URL-адреса при нажатии клавиши:

history.push(`/SearchResult/?search=${search}`);

На этой странице вам нужно получить параметр из URL и с помощью useLocation:

import { useLocation } from "react-router-dom";

И проанализируйте результаты с помощью URLSearchParams:

const search = new URLSearchParams(location.search).get("query");

Пожалуйста, ознакомьтесь с более подробной информацией в приведенном примере.

Сначала добавьте это к своим маршрутам. Потому что вы указали только SearchResult маршрут, а не SearchResultPage, несмотря на то, что они используют один и тот же комп.

{
    path: `/SearchResultPage`,
    component: SearchResult
  }

Контекст настройки:

export const Context = createContext();

и провайдер:

const Provider = ({ children }) => {
  const [gameIds, setGameIds] = useState([]);
  const provider = useMemo(() => ({ gameIds, setGameIds }), [
    gameIds,
    setGameIds
  ]);

  return (
    <Context.Provider value = {{ ...provider }}>{children}</Context.Provider>
  );
};

чтобы иметь возможность сохранять переменные глобально.

сохраните идентификаторы в массив в поиске:

const { setGameIds } = useContext(Context);

...
setGames(gameData);
setSearch(e.target.value);
setGameIds(gameData.map(({ id }) => id));

получить их на SearchResult

const { gameIds } = useContext(Context);
...
data.filter(({ id }) => gameIds.includes(id))

Демо