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

【问题标题】：Nav.Link not working in React bootstrap navbar (React-router-dom)Nav.Link 在 React 引导导航栏（React-router-dom）中不起作用
【发布时间】：2021-12-29 23:19:33
【问题描述】：

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

Here 是一个代码框链接，我可以在其中复制我的问题

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

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

【问题讨论】：

您确定使用的react-bootstrap 的版本吗？您的 CSB 使用的是 v2（v5 引导程序），但您已使用引导程序 v4 对其进行了标记。我尝试了各种包的不同版本的几种组合。 Container 组件似乎是问题所在。添加 fluid 道具或完全删除它是我可以让链接正常工作的唯一方法。基本上Container 组件通过::after 伪元素应用全屏覆盖。我不知道它为什么会这样做。
检查我使用的是 v5 后，我不小心把它标记错了，我的错了。谢谢你的解释，我很感激！
似乎在我的标签中添加流体也解决了这个问题
正确。我只是没有提供我的评论作为答案，因为这样做似乎也删除了填充或以其他方式弄乱了布局，我认为您想要/试图保持这一点。

标签： reactjs react-router-dom react-bootstrap bootstrap-5

【解决方案1】：

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

【讨论】：