react-router Outlet 组件解析

type

Post

status

Published

date

May 15, 2023

slug

summary

妙用 context，解决 children 逐级传递的问题

category

技术分享

icon

password

我准备给所有的页面加一个包裹的容器（自定义Layout），我们的框架支持这种Layout的能力，即

按照我的想法，要将原来单独渲染的 Page 改成 Layout 嵌套 Page 的模式，那么必须要给 Layout 赋予 children 属性，children 的内容就是 Page。

但奇怪的是，在编写 Layout 容器组件的时候，框架并没有给我传递任何的 props，也就是说我拿不到 children 属性。这咋渲染 Page 啊……

但既然框架提供了这种能力，那必定是有解法的。但我把框架的使用手册翻了个遍，也没有找到任何自定义 Layout 的示例代码。

既然手册里找不到，你就去代码仓库看看。还真有收获！！！

在某个项目的自定义 Layout 容器中，我看到了这么个组件：Outlet ，使用的时候没有传递任何的props，大概就是：


<Outlet />

抱着试试看的想法，我试了试这个组件，还真给我把 Page 给渲染出来了。

这让我对它的实现原理产生了兴趣，为什么我没有给这个组件传递任何的props，它是如何劫持到我当前渲染的是哪个页面的呢？

找来了它的源码看了看：

关键代码见：

主要实现原理就是初始渲染是向每个 RouteContext 都塞一个 outlet 属性，这个 outlet 属性存储的就是路由信息，切换路由的时候，就从当前 RouteContext 中读取其 outlet 属性，就可以解析出来 children 的内容。

算是 context 的一个妙用，使用全局数据共享的方式，解决了 children 逐层传递的问题。