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

Question

我正在用 React 开发一个项目并尝试实现 bootstrap 导航栏和 react-router-dom。我能够正确显示所有内容，但是，link 的 none 工作。

Here 是一个 link 到我能够复制我的问题的 codesandbox

任何对我遗漏的见解都将不胜感激！

<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> 元素。似乎这是导致问题的原因。