React Router 路由渲染组件到容器元素
ReactRouter route render component to container element
我的问题是我需要将单独的路由组件呈现给后端创建的元素。我敢肯定这是不规则的。本质上，我从 html 文档开始，需要将路由组件渲染到 dom.
中的特定元素
示例：
如果我有四个组件，每个组件都需要渲染到预生成的元素。
<body>
<div id="elone" />
<div id="eltwo" />
<div id="elthree" />
<div id="elfour" />
</body>
现在我需要将我各自的组件呈现给每个元素。问题是，如果我在组件内调用 ReactDOM.render 它无法识别路由器，并且看起来路由无论如何都不会呈现到特定元素。
注意：不幸的是，我不能在 JS 中编写文档，它必须预先生成。如果有其他解决方案，我不需要通过 react router 来完成，但组件必须识别路由器。
我讨厌回答自己的问题，这让人觉得这里好像没有人真正回答问题。
无论如何，解决方案是在组件中使用 ReactDOM.createPortal 而不是 ReactDOM.render。确保将带有路由器的组件渲染到您想要将子组件传送到的容器外部的元素，否则您显然会破坏您的传送门指向的元素。
我的问题是我需要将单独的路由组件呈现给后端创建的元素。我敢肯定这是不规则的。本质上，我从 html 文档开始，需要将路由组件渲染到 dom.
中的特定元素示例：
如果我有四个组件，每个组件都需要渲染到预生成的元素。
<body>
<div id="elone" />
<div id="eltwo" />
<div id="elthree" />
<div id="elfour" />
</body>
现在我需要将我各自的组件呈现给每个元素。问题是，如果我在组件内调用 ReactDOM.render 它无法识别路由器，并且看起来路由无论如何都不会呈现到特定元素。
注意：不幸的是，我不能在 JS 中编写文档，它必须预先生成。如果有其他解决方案，我不需要通过 react router 来完成，但组件必须识别路由器。
我讨厌回答自己的问题，这让人觉得这里好像没有人真正回答问题。
无论如何，解决方案是在组件中使用 ReactDOM.createPortal 而不是 ReactDOM.render。确保将带有路由器的组件渲染到您想要将子组件传送到的容器外部的元素，否则您显然会破坏您的传送门指向的元素。