react-bootstrap 的 Navbar 组件在点击注销并导航到新页面时没有崩溃

问题描述 投票:0回答:0

我正在使用 react-bootstrap,当我单击注销时,页面导航到主页,导致 Navbar 不折叠。如何解决?如果不点击注销,它会崩溃,例如,点击个人资料或登录。我发现原因是我使用导航('/');在ProfilePage中,点击注销时,ProfilePage会导航到HomePage,其他使用Link导航。

  <header>
      <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand>ProShop</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <LinkContainer to="/cart">
                <Nav.Link>
                  <i className="fas fa-shopping-cart"></i> Cart
                </Nav.Link>
              </LinkContainer>
              {user ? (
                <NavDropdown title={user.name} id="username">
                  <LinkContainer to="/profile">
                    <NavDropdown.Item>Profile</NavDropdown.Item>
                  </LinkContainer>
                  <NavDropdown.Item onClick={logoutHandler}>
                    Logout
                  </NavDropdown.Item>
                </NavDropdown>
              ) : (
                <LinkContainer to="/login">
                  <Nav.Link>
                    <i className="fas fa-user"></i> Sign In
                  </Nav.Link>
                </LinkContainer>
              )}
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
react-bootstrap
© www.soinside.com 2019 - 2024. All rights reserved.