多路由下渲染导航组件

Question

目前，<Navigation /> 组件呈现在我的组件之上。这是我的代码：

<div className="app">
  <Router>
    <Navigation />

    <AppWrapper>
      <Switch>
        <Route exact path="/" render={() => (
        <MainLayout>
          <Homepage />
        </MainLayout>
        )} /> <Route path="/search" render={() => <SearchBar />} />
      </Switch>
    </AppWrapper>
  </Router>
</div>

现在，当我将 <Navigation/> 组件移动到路由下时，它仍然呈现在屏幕顶部。这是代码：

<div className="app">
  <Router>
    <AppWrapper>
      <Switch>
        <Route exact path="/" render={() => (
        <MainLayout>
          <Homepage />
        </MainLayout>
        )} /> <Route path="/search" render={() => <SearchBar />} />
      </Switch>
    </AppWrapper>
    <Navigation />
  </Router>
</div>

.app {
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: var(--main-background);
  font-family: "Poppins";
  max-width: 100vw;
}

如何在我的所有路由下呈现<Navigation/> 组件？