反应路由器路径

Question

App 组件包含导航栏。 页面组件包含 main。 想法 - 当 url 为 'localhost:3000/authentication' 时一起显示 App 组件和页面组件 但是当我在这个 url 上时 - 它只显示导航栏。

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="authentication" element={<Authentication />} />
      </Route>
    </Routes>
  </BrowserRouter>,

  document.getElementById("root")

);

但是当我在不嵌套的情况下执行此操作时，它会在“/”url 上显示 App，在“auth”url 上显示 Auth：

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}/ >
      <Route path="authentication" element={<Authentication />} />
    </Routes>
  </BrowserRouter>,

  document.getElementById("root")

第一个例子应该有效，但他没有。使用 useNavigate

Answer 1

App 组件还应该为嵌套的Route 组件渲染一个Outlet 组件。

Outlet

应该在父路由元素中使用<Outlet> 来呈现它们的 子路由元素。这允许嵌套的 UI 在孩子时显示 路线被渲染。如果父路由完全匹配，它将 如果没有索引路由，则渲染子索引路由或不渲染。

例子：

import { Outlet } from 'react-router-dom';

const App = () => (
  <>
    <Navbar />
    <Outlet /> // <-- nested routes render here
  </>
);

...

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="authentication" element={<Authentication />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);