React 路线：在组件周围导航时 NavBar 始终位于顶部

Question

我绝对是 React 的忠实用户，我在 React (v6) 中遇到了一个非常（希望如此）简单的路由问题。我有：

1 个导航栏
2 个组件

我想使用 React 路由 6 通过“导航栏菜单”访问这两个组件，但我无法将导航栏固定在顶部。我一导航到组件，它就消失了。

我用图来解释：

这是我的配置：

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<NavBar />} />
          <Route exact path="/componenta" element={<ComponentA />} />
          <Route exact path="/componentb" element={<ComponentB />} />
        </Routes>
      </div>
    </Router>
  );
}

如果你想要 here you can find the related CodeSandbox: https://codesandbox.io/s/pensive-river-5n6go?file=/src/App.js

如何正确配置路由 (v6) 以使其正常工作？感谢您的帮助。

Answer 1

将 NavBar 拉到 Routes 之外：

<NavBar />
<Routes>
   <Route exact path="/componenta" element={<ComponentA />} />
   <Route exact path="/componentb" element={<ComponentB />} />
</Routes>

然后它应该呈现在应用程序的顶部 div，并且路由更改将呈现其下方的选定组件。

Answer 2

如果您想在不考虑路线的情况下呈现导航栏，则将其呈现在 Routes 组件之外。

function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <Routes>
          <Route path="/componenta" element={<ComponentA />} />
          <Route path="/componentb" element={<ComponentB />} />
        </Routes>
      </div>
    </Router>
  );
}

如果您只想有条件地使用特定路线呈现导航栏，则将其呈现为布局组件，该布局组件还为嵌套的 Route 组件呈现 Outlet。

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route
            element={(
              <>
                <NavBar />
                <Outlet />
              </>
            )}
          >
            <Route path="/componenta" element={<ComponentA />} />
            <Route path="/componentb" element={<ComponentB />} />
          </Route>
          ... other routes without navbar
        </Routes>
      </div>
    </Router>
  );
}

React 路线：在组件周围导航时 NavBar 始终位于顶部

React route: NavBar always on top while navigating around the components

reactjs

react-router-dom