Nav.Link not working in React bootstrap navbar (React-router-dom)-CodePudding

I am working on a project in React and trying to implement a bootstrap navbar and react-router-dom. I am able to get everything displaying properly, however, none of the links work.

Here is a link to a codesandbox where I was able to replicate my issue

Any insights into what I am missing would be greatly appreciated!

<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>

CodePudding user response：

Remove the <Container> element wrapping the navbar. Seems like that is causing the issue.