how to render same component in every route

Question

import ...

const App = () => {
  const [showModal, setShowModal] = useState(false);
  const toggleModalShow = () => {
    setShowModal(!showModal);
  };

  return (
    <div className="app">
      <Router>
        <ScrollToTop>
          <Routes>
            <Route
              exact
              path="/"
              element={
                <>
                  <Header
                    toggleModalShow={toggleModalShow}
                    showModal={showModal}
                  />
                  <main className="main">
                    <Home />
                  </main>
                </>
              }
            />
            <Route
              path="/games/:game"
              element={
                <>
                  <Header
                    toggleModalShow={toggleModalShow}
                    showModal={showModal}
                  />
                  <GameLobby />
                </>
              }
            />

            <Route
              path="/games"
              element={<PrivateRoute isLoggedIn={isLoggedIn} />}
            >
              <Route
                path="/games"
                element={
                  <>
                    <Header
                      toggleModalShow={toggleModalShow}
                      showModal={showModal}
                    />
                    <Games />
                  </>
                }
              />
            </Route>
          </Routes>
        </ScrollToTop>
      </Router>
    </div>
  );
};

export default App;

Hi all.i want to show <Header /> component in every route but to this i have to use <Header /> component in every <Route />. Is there any way to do that without ? Finally i would be appreciate if you give me feedback about project.

repo : https://github.com/UmutPalabiyik/mook deploy: https://mook-f2b4e.web.app

for testing: username: test pass: 123

Answer 1

Just move the Header above Routes:

return (
    <div className="app">
      <Router>
        <Header
          toggleModalShow={toggleModalShow}
          showModal={showModal}
        />
        <ScrollToTop>
        <Routes>
          <Route
            exact
            path="/"
            element={
              <>
                <main className="main">
                  <Home />
                </main>
              </>
            }
          />
          ...
        </Routes>
        </ScrollToTop>
      </Router>
    </div>
  );
};