Как сделать статический header?

Question

[Юрий Иванов]

Добрый день, надо помощь, ребят
Есть приложение на 3 страницы, но у всех страниц один и тот же header
В хедере инпут и кнопка, хочу сделать один и тот же хедер для всех страниц, но не знаю как это сделать
Я нагуглил, что это делается или через редакс (или эффектор) или через useContext
Но я вообще не могу сообразить и нагуглить как это реализовать
У меня функция findUser(которая срабатывает на кнопку инпута) сейчас находится в mainPage
Помогите пожалуйста, какой алгоритм действий должен быть, что бы это реализовать

const App = ({ findUser, setinputValue }) => {
  return (
    <>
      <Header
        findUser={findUser}
        setinputValue={setinputValue}
      />
      <Routes>
        <Route path="StartSearchingPage" element={<MainPage />} />
        <Route path="/" element={<StartSearchingPage />} />
        <Route path="UserNotFoundPage" element={<UserNotFoundPage />} />
      </Routes>
    </>
  );
};

const findUser = async () => {
    setLoading(true);
    setUserNickName(inputValue);
    const reposUrl = `${usersUrl + inputValue}/repos?page=${githubPageref.current}`;
    const profileUrl = usersUrl + inputValue;
    await getApiResource(reposUrl)
      .then((data) => {
        if (!data) { navigate('UserNotFoundPage'); }
        setRepos([...data, ...repos]);
        reposRef.current = ([...repos, ...data]);
      });
    await getApiResource(profileUrl)
      .then((data) => {
        setUserProfile(data);
        setLoading(false);
      });
  };

Answer 1

[Иван Музыка]

хочу сделать один и тот же хедер для всех страниц

Можно использовать Outlet
https://reactrouter.com/docs/en/v6/components/outlet