React-Bootstrap Navbar 問題

Question

有人可以幫我對齊導航欄嗎？ 我所做的一切都沒有使頂部正常排列。 我認為問題可能是當導航欄被切換時，無論用戶是否登錄和管理員。 我想知道是否是因為 div，我現在是否必須制作一個單獨的組件。 它也無緣無故地很大。

  <Navbar.Brand href="/homepage" className="logo">
    <h2>BookShopper</h2>
    {/* <img src = 'logo.png' height = '100px' width = '300px'/> */}
  </Navbar.Brand>

  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Form className="d-flex">
      <FormControl
        className = "justify-content-center"
        type="search"
        placeholder="Search"
        className="me-2"
        aria-label="Search"
      />
    </Form>

    {isLoggedIn ? (
      <div>
        <Nav className="me-auto">
          <Nav.Link href="/edit">Profile</Nav.Link>
          {/* The navbar will show these links after you log in */}
          <Nav.Link href="#" onClick={handleClick}>
            Logout
          </Nav.Link>
          <Nav.Link href="/cart">
            <BsFillBasket3Fill />
          </Nav.Link>
        </Nav>
        {isUserAdmin && (

             <div>
             <Nav className="me-auto">
               <NavDropdown
                 title="Market Place"
                 id="collasible-nav-dropdown"
               >
                 <NavDropdown.Item href="/stock">Stock</NavDropdown.Item>
                 <NavDropdown.Item href="/users">Users</NavDropdown.Item>
                 <NavDropdown.Item href="/add-book">
                   Add Book
                 </NavDropdown.Item>
               </NavDropdown>
             </Nav>
           </div> 
        )}
      </div>
    ) : (
      <div>
        {/* The navbar will show these links before you log in */}
        <Nav>
          <Nav.Link href="/login">Login</Nav.Link>
          <Nav.Link href="/cart">
            <BsFillBasket3Fill />
          </Nav.Link>
        </Nav>
      </div>
    )}
  </Navbar.Collapse>
  {/* </Container> */}
</Navbar>

我只希望元素水平排列並看起來正常。

Answer 1

使用您的代碼，您將創建兩個導航（如果已登錄且用戶為管理員）。 將 Nav 移到三元運算符之外以僅創建一次並根據您的邏輯設置導航鏈接。

基本上你想要：

• 未登錄時：顯示“登錄”和“購物籃”
• 登錄時：顯示“個人資料”、“注銷”和“購物籃”
• 登錄並擁有管理員權限時：顯示“個人資料”、“注銷”、“購物籃”和“市場”

我創建了一個沙箱，解決了雙導航問題，並嘗試簡化您的 boolean 邏輯： https://codesandbox.io/s/interesting-darkness-i0u64k?file=/src/App.js