//首先声明Com用来获取组件信息
const { component: Com } =
//routerConfig对应路由信息
routerConfig.find((item) =>
//matchPath方法首先通过path-to-regexp的方法来获取Route上定义的path对应的正则，再将生成的正则表达式与url中的pathname做正则匹配判断是否匹配。
matchPath(path, {
path: item.path,
exact: true,
strict: false,
}),
) || {};
//其次 在需要离屏渲染加载的地方 进行部署
{Com ? (
<OffScreen>
<PathContext.Provider value={path}>
<Com />
</PathContext.Provider>
</OffScreen>
) : null}
//OffScreen 用来创建虚拟节点
export default class OffScreen extends Component {
//createDocumentFragment方法是用来创建虚拟节点
fragment = document.createDocumentFragment();
render() {
return createPortal(
this.props.children,
this.fragment
);
}
}
//createContext 解决无需层级关系传递，接受所有的props
import { createContext } from 'react';
const PathContext = createContext<string>(''); // default value
export default PathContext;