안녕하세요 선생님! 질문하고 싶은 게 있어서 이렇게 글 남깁니다.
오류 없이 사이트가 잘 작동하긴 하는데요. 갑자기 추가하고 싶은 기능이 있는데 이걸 어떻게 구현해야될지 감이 안 잡힙니다.
Navbar와 관련이 있는건데요. 웹사이트의 크기를 줄이면 자동으로 부트스트랩이 Navbar에 토글 버튼을 만들어주지 않습니까?
그 토글 버튼을 누르면 Navbar 리스트들이 확장되어서 나왔다가 다시 누르면 사라졌다가를 반복하고요.
그런데 나온 상태에서 Nav.Link를 누르면 Route에 의해 자동으로 내용이 바뀌는데
내용만 바뀌고 새로고침은 안되어서 그런지 Nav.Link를 누른 후에도 토글 버튼을 눌렀을때 자동으로 나왔던 리스트가 다시 들어가지는 않더군요.
Nav.Link 버튼이나 그 리스트 안에 있는 버튼을 누르면 사이트의 내용이 바뀌는 것 뿐만 아니라 자동으로 Navbar 리스트가 다시 들어가도록 하는 기능은 어떻게 구현해야 하나요?
React Bootstrap이라서 그런지 이를 수정하는게 더 감이 안 잡히는 것 같습니다.
답변 부탁드립니다!
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand as={Link} to="/">Shoes Shop</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to="/">Home</Nav.Link>
<Nav.Link as={Link} to="/detail">Detail</Nav.Link>
<Nav.Link as={Link} to="/cart">Cart</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
