ReactJS中Bootstrap的Nav.Link跳转不生效该如何修复

你使用的React Bootstrap内置的Nav.Link、Navbar.Brand组件默认不识别React Router的to路由属性，只会将to作为普通自定义属性渲染到生成的a标签上，浏览器没有对应处理逻辑，因此无法触发路由跳转。

1. 首先确保你的项目已经正确安装并配置了react-router-dom，且当前导航组件处于Router路由包裹范围内。
2. 在导航组件顶部引入React Router的Link组件：

import { Link } from 'react-router-dom';

3. 给所有用到to属性的Navbar.Brand、Nav.Link组件添加as={Link}属性，指定组件以React Router的Link为基础渲染，修改后完整代码如下：

<Navbar collapseOnSelect expand="lg">
  <Container>
    <Navbar.Brand as={Link} to="/">Rental</Navbar.Brand>
    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse id="responsive-navbar-nav">
      <Nav>
        <Nav.Link as={Link} to="/" >
           <FontAwesomeIcon 
            icon={faHome} 
         /> Home
       </Nav.Link>
       <Nav.Link as={Link} to="/login" >
          <FontAwesomeIcon 
          icon={faUser} 
          /> Login/ Registration
       </Nav.Link>
    </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

as是React Bootstrap通用的组件渲染属性，作用是指定当前组件的底层渲染载体，同时保留原有组件的样式、交互特性。添加as={Link}后，Nav.Link会将to属性正确传递给React Router的Link组件，最终渲染出的a标签会生成标准可识别的路由跳转属性，点击即可正常跳转。

内容的提问来源于stack exchange，提问作者MUMU