为什么将我的 react-router 链接放入 Bootstrap 5 下拉导航栏按钮时不起作用？答案

【问题标题】：Why are my react-router Links not working when put inside a Bootstrap 5 dropdown navbar button?为什么将我的 react-router 链接放入 Bootstrap 5 下拉导航栏按钮时不起作用？
【发布时间】：2021-12-15 15:35:19
【问题描述】：

我实际上是从 Bootstrap 页面复制粘贴导航栏，并在每种情况下都将“class”更改为“className”，因为我正在使用 React。然后我只是将<Link> 放在<a> 项目中，但即使我用<Link> 替换<a>，它在这两种情况下都不起作用。我还尝试用 div 替换 ul 并简单地将链接放入其中。我还将 jquery 导入到 index.js，我在很多地方寻找的所有解决方案。但我根本无法完成这项工作。我开始怀疑 React-Router 和 BS 一起工作存在某种错误。但无论如何，也许你可以告诉我我做错了什么。该按钮出现，但是当我单击它时没有任何反应。链接应该下拉，但他们没有。

更新：链接确实在非切换按钮导航栏中工作。所以这不是 react-dom 的问题。这是一个引导程序。

import React from "react";
import {Link} from "react-router-dom";

const Navbar = () => {
    return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
  <div className="container-fluid">
    <a className="navbar-brand">Crea tu equipo de superhéroes</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarNav">
      <ul className="navbar-nav">
        <li className="nav-item">
          <a className="nav-link active" aria-current="page"><Link to="/">Favoritos</Link></a>
        </li>
        <li className="nav-item">
          <a className="nav-link"><Link to="/Search">Búsqueda</Link></a>
        </li>
      </ul>
    </div>
  </div>
</nav>
    )
}

export default Navbar;

App.js：

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./Navbar";
import Home from "./Home";
import Search from "./Search";

const App = () => {

 return ( 
        <Router>
            <Navbar/>
            <Switch>
                <Route exact path="/">
                    <Home/>
                </Route>
                <Route path="/Search">
                    <Search/>
                </Route>
            </Switch>
        </Router>
 )
}

【问题讨论】：

您是否使用react-router-dom BrowserRouter, Route & Switch 设置了路由部分？如果是，那么你能在这里也展示这部分代码吗？
那里。如果您发现任何问题，请告诉我。谢谢
App.js 中 Search 和 Home 组件的导入在哪里？
那里。从反应路由器的角度来看，一切都很好。当我删除工具按钮并仅将链接保留在列表中时，它可以工作。
是的，您需要 jquery 和 popper 才能使其功能齐全。你试过 React Bootstrap 吗？它具有内置的功能。你只需将它与基本的引导 css 包一起使用（假设你已经安装了引导程序）stackoverflow.com/a/38136836/10262432

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

【解决方案1】：

我在使用 React 路由器链接和自定义库时遇到了同样的问题，我解决了它用“Link”标签包装“item”标签（在你的情况下为“li”）。因此，您可以尝试以下方法：

<div className="collapse navbar-collapse" id="navbarNav">
    <ul className="navbar-nav">
        <Link to="/">
            <li className="nav-item">
                <a className="nav-link active" aria-current="page">
                    Favoritos
                </a>
            </li>
        </Link>
        <Link to="/Search">
            <li className="nav-item">
                <a className="nav-link">
                    Búsqueda
                </a>
            </li>
        </Link>
    </ul>
</div>

不确定这是否会覆盖某些样式，因为我无法使用 Bootstrap 对其进行测试，但出于某种原因，您需要“优先考虑”“链接”标签，这样您就不会失去对焦点的参考。

【讨论】：