Outlet

类型声明

interface OutletProps {
  context?: unknown;
}
declare function Outlet(
  props: OutletProps
): React.ReactElement | null;

子路由出口，在父路由元素中使用<Outlet>来渲染它们的子路由元素。这样可以在渲染子路由时显示嵌套的UI。如果父路由完全匹配，则会渲染子索引路由，如果没有索引路由，则不会渲染任何内容。

const router = createBrowserRouter([
  {
    path: '/',
    element: <App/>,
    children: [
      {
        index: true,
        element: <HomeComponent/>
      },
      {
        path: '/about',
        element: <About/>
      },
    ]
  }
])

export const HomeComponent = () => {
  return (
    <div>
      <h1>welcome to home</h1>
      <Outlet />
    </div>
  );
};