bootstrap nav link 在 reactjs 中不起作用

Question

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

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

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

并且 link 将无法正常工作。

如何解决？

Answer 1

看起来你正在渲染 react-bootstrap 的 Nav.Link 而不是 react-router 的 Link 组件，所以路由器没有接收你的路由更改。

因此从 React 路由器导入 Link 并使用它应该可以解决问题。

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

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

Answer 2

将您的代码包装在路由器中，确保您在应用程序或 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>

bootstrap nav link 在 reactjs 中不起作用

bootstrap nav link is not working in reactjs

javascript

nav

twitter-bootstrap

reactjs