Outlet

Outlet组件是用来在父路由组件中标定其嵌套子路由组件的渲染位置的。Outlet组件的使用非常简单,只需要书写到父路由组件中所需要的位置即可,不需要其他任何属性配置。

Tip

现在React Router还不支持命名路由,即在一个父级组件中通过对Outlet组件命名来同时渲染多个子路由组件,所以在设计嵌套路由的时候,需要注意路由表的编排。

以下是一个Outlet组件的使用示例。

function FuncLayout() {
  return (
    <div>
      <h1>Main Functions</h1>
      <Outlet />
      <ul>
        <li>
          <Link to="/func/1">Function 1</Link>
        </li>
      </ul>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/func" element={<FuncLayout />}>
        <Route path=":id" element={<FuncItem />} />
      </Route>
    </Routes>
  );
}

Outlet组件目前不支持接受任何属性,所以只需要在需要渲染嵌套子路由的位置放置这个组件就可以了。