reactjs - react 路线 : NavBar always on top while navigating around the components

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你可以找到相关的CodeSandbox:https://codesandbox.io/s/pensive-river-5n6go?file=/src/App.js

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

Answer 1

如果你想渲染导航栏而不考虑路由，那么在 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>
  );
}