如何在每条路线中呈现相同的组件

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;

大家好。我想在每条路线中显示<Header /> 组件，但为此我必须在每个<Route /> 中使用<Header /> 组件。有没有办法做到这一点？最后，如果您能给我有关项目的反馈，我将不胜感激。

回购：https://github.com/UmutPalabiyik/mook 部署：https://mook-f2b4e.web.app

用于测试： 用户名：test 通过：123

Answer 1

只需将Header 移到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>
  );
};