引导导航链接在 reactjs 中不起作用答案

【问题标题】：bootstrap nav link is not working in reactjs引导导航链接在 reactjs 中不起作用
【发布时间】：2021-11-29 17:44:36
【问题描述】：

我是新来的，也是 ReactJS 的新手。

这里我使用 Reactjs 中的引导导航栏组件创建了一个导航栏。

<Navbar collapseOnSelect expand="lg">
  <Container>
    <Navbar.Brand to={"/"}>Rental</Navbar.Brand>
    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse id="responsive-navbar-nav">

    <Nav>
      <Nav.Link to="/" >
         <FontAwesomeIcon 
          icon={faHome} 
       /> Home
     </Nav.Link>
     <Nav.Link to="/login" >
        <FontAwesomeIcon 
        icon={faUser} 
        /> Login/ Registration
     </Nav.Link>
  </Nav>
  </Navbar.Collapse>
 </Container>
</Navbar>

当我去浏览器并检查时显示如下：

<a to="/" role="button" class="nav-link" tabindex="0">Home</a>

链接失效了。

如何解决？

【问题讨论】：

你用过 React 路由器吗？ React 没有自带路由方案，推荐使用 react-router 进行路由。
是的，我使用 reactjs 路由器
<a to="/" role="button" class="nav-link" tabindex="0">Home</a> 它不是按钮，但它显示为按钮我认为这就是为什么链接不起作用并且没有改变但它将是href 对吗？

标签： javascript reactjs twitter-bootstrap nav

【解决方案1】：

看起来您正在渲染 react-bootstrap 的 Nav.Link 而不是 react-router 的 Link 组件，因此路由器不会接收您的路由更改。

所以从反应路由器导入链接并使用它应该可以解决问题。

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

<Nav.Link as={Link} to="/" >
   <FontAwesomeIcon 
      icon={faHome} 
    /> Home
</Nav.Link>

【讨论】：

现在可以使用了，感谢@Shaurya Vardhan Singh

【解决方案2】：

将您的代码包装在路由器中，确保您在 App 或 ReactDOM.render 中执行此操作：

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, 
  rootElement
  );

您正在渲染 react-bootstrap 的 Nav.Link 而不是 react-router 的 Link 组件，因此路由器不会接收您的路由更改。

react-bootstrap 在它的大部分组件中都提供了一个 render prop 来指定如果我们不想要默认值我们想要渲染哪个组件或元素。

尝试做出这些改变！

import { Switch, Route, Link } from 'react-router-dom';

<Navbar.Brand as={Link} to="/" >Rental</Navbar.Brand>

<Nav.Link as={Link} to="/" >
    <FontAwesomeIcon icon={faHome}/>
        Home
</Nav.Link>

<Nav.Link as={Link} to="/login" >
    <FontAwesomeIcon icon={faUser}/> 
        Login/ Registration
</Nav.Link>

【讨论】：