在 DOM 中渲染 React 组件答案

【问题标题】：Render React Components in DOM在 DOM 中渲染 React 组件
【发布时间】：2020-11-04 17:52:29
【问题描述】：

感谢任何人的帮助！在我看来，我无法找到解决此问题的方法。这是我的情况：

我目前在 React 中有一个侧边栏和一个顶部栏导航。到目前为止，这是我的应用程序的picture。我想在目标 DOM 中渲染组件，基本上是从侧边栏单击时。这是我的侧边栏组件：

export default function Sidebar() {
  return (
    <div className="wrapper">
      <nav id="sidebar">
        <div className="sidebar-header text-center">
          <h3>Point of Sales</h3>
          <strong>POS</strong>
        </div>
        <ul className="list-unstyled components">
          <li>
            <Link to="/inventory">
              <i className="fas fa-briefcase"></i>
              <span className="navText ml-3">Inventory</span>
            </Link>
          </li>
          <li>
            <a href="#">
              <i className="fas fa-image"></i>
              <span className="navText">Portfolio</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i className="fas fa-question"></i>
              <span className="navText">FAQ</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i className="fas fa-paper-plane"></i>
              <span className="navText">Contact</span>
            </a>
          </li>
        </ul>
      </nav>
      <div id="content">
        <Topbar />
        {/* Render navigation components here!*/}
      </div>

      <Route path="/inventory" exact={true} component={InventoryView} />
    </div>
  );
}

但是，现在当我单击侧边栏中的链接时，它会呈现我的组件，如 this picture。我已经尝试通过将道具、React 组合传递给自定义组件并在那里渲染它来做到这一点；但是，它对我不起作用。

有什么建议吗？非常感谢您的帮助！

【问题讨论】：

所以你有一个父 <div id="content"> 在你声明的时候渲染导航组件，但是你在它之外声明你的路线？
这不是反应路由器问题，而是“HTML 结构 + CSS”问题。为什么你的侧边栏组件还包含顶栏和的主要内容？ “目标 DOM”是什么意思？无论如何，<Route> 组件基本上是有条件渲染的组件；是否渲染取决于它的路径是否与当前路由匹配。这意味着它确实需要位于应用程序 JSX 中的适当位置，就像任何常规组件一样。
@Apostolos 我非常感谢你！这只是为我解决了它。你是一颗真正的宝石。
好的，我将其发布为接受它的答案。谢谢
@ChrisG 感谢您的回复。错误实际上是我在渲染组件的地方。我只是将<Route> 移动到#content div 中。

标签： javascript css reactjs typescript react-router

【解决方案1】：

您正在声明一个Route，它将在您希望执行的父标记之外呈现一个组件。应该是这样的。

  <div id="content">
    <Topbar />
    <Route path="/inventory" exact={true} component={InventoryView} />
  </div>

【讨论】：