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

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>
  );
}

如果你想要在这里你可以找到相关的CodeSandbox：https://codesandbox.io/s/pective-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>
  );
}

如果您只想有条件地渲染具有特定路由的导航栏，则将其渲染为布局组件，该布局组件也渲染Outlet嵌套Route组件。

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>
  );
}