使用 React Router <Link> 切换页面时 JQuery 未触发答案

【问题标题】：JQuery Not Firing When Switching Pages Using React Router <Link>使用 React Router <Link> 切换页面时 JQuery 未触发
【发布时间】：2020-06-27 05:14:30
【问题描述】：

我正在使用 a 访问不同的页面，当我从主页转到产品页面时，我的汉堡包按钮看起来像是被点击但没有打开。此外，当我刷新页面时，它再次起作用。因此，如果我刷新页面然后单击主页，它会将我重定向到主页，但汉堡按钮不再起作用？我已经使用 import $ from 'jquery' 包含了 jquery，所以我不知道它可能是什么，下面是我的文件。

Javascript链接点击：

import $ from 'jquery'
import jquery from 'jquery'

$(document).ready(function () {
  //When hamburger button is clicked, open nav menu and pause carousel
  $('.navbar-toggler, navbar-collapse').on('click', function () {
    $('.mobilemenu, navbar-collapse').toggleClass('open')
  })

  //Shows the hamburger button when navbar is not open
  $('#hiddenToggler').on('click', function () {
    $('#hamburgerButton').show()
  })

  //Hides the hamburger button when navbar is open
  $('#hamburgerButton').on('click', function () {
    $('#hamburgerButton').hide()
  })
})

链接到产品页面的示例

<Link to="/ProductPage/">
            <div className="card" key={product.id}>
              <div className="card-img-wrap">
                <img
                  className=" card-img-top"
                  src={product.img}
                  alt="Card image cap"
                />
              </div>
              <div className="card-body">
                <h6 className="card-title text-center">{product.name}</h6>
                <p className="card-text text-center">
                  <small className="text-muted red">${product.price}</small>
                </p>
              </div>
            </div>
          </Link>

Css 导航栏如何打开

.mobilemenu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 70%;
    margin: auto;
    background-color: white;
    transform: translateX(-100%);
    transition: all ease 0.25s;
    &.open {
      transform: translateX(0%);
    }

【问题讨论】：

$('.navbar-toggler, navbar-collapse') 在第二个选择器中缺少. 点。
@Pain 很好，我很欣赏它，但它仍然可以正常工作:(
另外，很多人很难从 jquery 切换到 React 思维模式。您通常不需要像这样直接操作 DOM。您可以改为跟踪切换的状态并适当调整渲染的输出。
@Pain 就像当我被重定向到另一个页面时， (document).ready 拒绝触发，所以当我点击按钮时，下面的代码都没有机会运行。
@tmdesign 这可能是我能做的最好的事情，你有什么好的链接可以偶然设置吗？

标签： javascript html css reactjs bootstrap-4

【解决方案1】：

面对同样的问题，我在我的项目中使用了引导 cdn 文件。

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

【讨论】：

所以同样的事情发生在你身上？如果你找到了解决方法，请告诉我，我可能只是使用 Reacts 状态而不是使用 Jquery，但会先搞砸它。
我通过直接使用引导 cdn 文件而不是 npm jQuery 包解决了我的问题。