Nav.Link 在 React bootstrap 导航栏（React-router-dom）中不起作用

Question

我正在 React 中开发一个项目，并尝试实现引导导航栏和 React-router-dom。我能够正确显示所有内容，但是所有链接都不起作用。

这是一个 codeandbox 的链接，我可以在其中复制我的问题

任何对我所缺少的内容的见解将不胜感激！

<BrowserRouter>
<div className='page-container'>
  <div className='content-wrap'>
      <div>
        <>
          <Navbar bg="dark" variant="dark">
            <Container>
              <Navbar.Brand href="#home">Shake Up Fitness</Navbar.Brand>
              <Nav className="me-auto">
                <Nav.Link as={Link} to='/'>Home</Nav.Link>
                <Nav.Link as={Link} to='/activities'>Activities</Nav.Link>
                <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
                <Nav.Link as={Link} to='/contact'>Contact</Nav.Link>
              </Nav>
            </Container>
          </Navbar>
        </>
        <div>
          <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/activities" element={<Activities/>} />
            <Route path="/signup" element={<SignUp/>} />
            <Route path="/contact" element={<Contact/>} />
          </Routes>
        </div>
      </div>
  </div>
<Footer />
</div>
</BrowserRouter>

Answer 1

删除<Container>包裹导航栏的元素。看来这就是导致问题的原因。