广告位
Outlet 如何使用-React Router
作者: 分类:编程技术浏览(1,135)2023-5-18

<> 用于渲染父路由中渲染子路由。如果父路由被严格匹配,会渲染子路由中的 index 路由(如有)。

类型定义如下:

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

示例:

import { Outlet } from 'umi';
 
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}
 
function DashboardWithContext() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet context={{ prop: 'a' }}/>
    </div>
  );
}

Outlet 组件的 context 可以使用 API useOutletContext 在子组件中获取。

图片压缩在线工具 tools online