React Router 将渲染组件路由到容器元素答案

【问题标题】：ReactRouter route render component to container elementReact Router 将渲染组件路由到容器元素
【发布时间】：2019-01-28 08:47:12
【问题描述】：

我的问题是我需要将单独的路由组件呈现给后端创建的元素。我敢肯定这是不规则的。本质上，我从一个 html 文档开始，需要将路由组件渲染到 dom 中的特定元素。

例子：

如果我有四个组件，每个组件都需要渲染到一个预先生成的元素。

<body>
<div id="elone" />
<div id="eltwo" />
<div id="elthree" />
<div id="elfour" />
</body>

现在我需要将我各自的组件渲染到每个元素。问题是，如果我在组件中调用 ReactDOM.render，它就无法识别路由器，而且看起来该路由无论如何都不会渲染到特定元素。

注意：很遗憾，我不能在 JS 中编写文档，它必须预先生成。如果有其他解决方案，我不需要通过react router来完成，但是组件必须识别路由器。

【问题讨论】：

【解决方案1】：

我讨厌回答自己的问题，这让人觉得这里没有人真正回答问题。

无论如何，解决方案是在组件中使用 ReactDOM.createPortal 而不是 ReactDOM.render。确保使用路由器将组件渲染到容器外部的元素，您希望将子组件传送到该元素，否则您显然会破坏门户指向的元素。

【讨论】：