在 DOM 中渲染 React 組件

Question

我感謝任何人的幫助。 在我看來，我找不到解決這個問題的方法：這是我的情況：

我目前在 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>
  );
}

但是，現在當我單擊側邊欄中的鏈接時，它會像這張圖片一樣呈現我的組件。 我已經嘗試通過將道具、React 組合傳遞給自定義組件並在那里渲染它來做到這一點； 但是，它對我不起作用。

有什么建議么？ 我真的很感謝你的幫助！

Answer 1

您正在聲明一個在您希望執行的父標記之外呈現組件的Route 。 應該是這樣的。

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