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

Posted 2023-02-19

【中文标题】如何在每条路线中呈现相同的组件

【英文标题】：how to render same component in every route

【发布时间】：2022-01-22 00:40:38

【问题描述】：

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

【参考方案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>
  );
;