Javascript 在DOM中呈现组件

我感谢任何人的帮助！在我看来，我找不到解决这个问题的办法。以下是我的情况：

我目前在React中有一个侧边栏和一个顶部栏导航。这里是我的应用程序到目前为止的一个例子。我想在目标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>
  );
}

导出默认函数边栏（）{
返回(
销售点
POS


库存








{/*在此处呈现导航组件！*/}
);
}

但是，现在当我单击侧边栏上的链接时，它将呈现我的组件。我已经尝试过通过传递道具，反应合成，到一个自定义组件并在那里渲染它来实现这一点；然而，这对我来说并不奏效

---

有什么建议吗？我真的很感谢你的帮助

您正在声明一个

路由

，该路由呈现您希望执行的父标记之外的组件。 应该是这样的

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

  

因此，您有一个父级

来呈现您所声明的导航组件，但您在其外部声明了您的路由？这与其说是react路由器问题，不如说是“HTML结构+CSS”问题。为什么侧边栏组件也包含顶栏和主要内容？“目标DOM”是什么意思？无论如何，

组件基本上是一个有条件呈现的组件；渲染与否取决于其路径是否与当前路由匹配。这意味着它确实需要在应用程序的JSX中的适当位置，就像任何常规组件一样。@Apostolos我非常感谢您！这就为我解决了问题。你是一颗真正的宝石。好吧，我把它贴出来作为接受它的答案。感谢you@ChrisG谢谢你的回复。错误实际上是我渲染组件的地方。我只是将

移动到

#content

div中。