当我使用 Link 或 NavLink 导航到 React 组件时，我的 Materialize css sidenav 汉堡菜单不起作用答案

【问题标题】：My Materialize css sidenav hamburger menu doesn't work when I navigate to a React component using Link or NavLink当我使用 Link 或 NavLink 导航到 React 组件时，我的 Materialize css sidenav 汉堡菜单不起作用
【发布时间】：2020-06-05 22:28:38
【问题描述】：

在移动视图上，每当我使用 Link 或 NavLink 导航到 React 组件并且浏览器不刷新我的物化 css sidenav 汉堡菜单时，我的实体化 css sidenav 汉堡菜单将变得静止且不可点击，但是当我重新加载页面时，sidenav 汉堡菜单将变为可点击再次。我知道这对我的移动用户来说不是一个好的用户体验。我已经尝试使用锚标记，但是如果每次单击浏览器都会重新加载，那么构建单页应用程序的目的就会失败。任何帮助、线索或建议将不胜感激。这是我尝试过的：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.jpg" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="apple-touch-icon" href="logo192.jpg" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


    <title>My Website</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

   <!-- Import JQuery -->
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

   <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

   <script>
    $(document).ready(function(){
      $('.sidenav').sidenav();
      $('.datepicker').datepicker();
      $('.modal').modal();
      $('.materialboxed').materialbox();
    });
  </script>
  </body>
</html>

navbar.js

import React from 'react'
import {Link} from 'react-router-dom'
import '../../myStyles/main.css' //my custom css file


const Navbar = () => {
    return (
        <div>
        <nav className="link-nav">
            <div className="nav-wrapper">

            <ul className="center hide-on-med-and-down">
                <li><Link className="link-font-size" to='/'>HOME</Link></li>
                <li><Link className="link-font-size" to='/about'>About</Link></li>
                <li><Link className="link-font-size" to='/contact'>Contact</Link></li>
                <li><Link className="link-font-size" to='/login'>Login</Link></li>
                <li><Link className="link-font-size" to='/signup'>Sign Up</Link></li>
            </ul>
            </div>
        </nav>

        <ul id='mobile-sidenav-menu' className="sidenav">
                <li><Link to="#" className="sidenav-close right pink-text lighten-1">X</Link></li>  <li><Link className="link-font-size" to='/'>HOME</Link></li>
                <li><Link className="link-font-size" to='/about'>About</Link></li>
                <li><Link className="link-font-size" to='/contact'>Contact</Link></li>
                <li><Link className="link-font-size" to='/login'>Login</Link></li>
                <li><Link className="link-font-size" to='/signup'>Sign Up</Link></li>
         </ul>
          <a to="#" className="sidenav-trigger" data-target="mobile-sidenav-menu" >
                <i className="material-icons">menu</i>
            </a>
        </div>
    )
}

export default Navbar

【问题讨论】：

标签： reactjs materialize sidenav

【解决方案1】：

按照materializecss docs 将汉堡放在导航栏中是否有帮助？

<nav className="link-nav">
     <div className="nav-wrapper">
        <a to="#" className="sidenav-trigger" data-target="mobile-sidenav-menu" ><i className="material-icons">menu</i></a>
        <ul className="center hide-on-med-and-down">
            <li><Link className="link-font-size" to='/'>HOME</Link></li>
            <li><Link className="link-font-size" to='/about'>About</Link></li>
            <li><Link className="link-font-size" to='/contact'>Contact</Link></li>
            <li><Link className="link-font-size" to='/login'>Login</Link></li>
            <li><Link className="link-font-size" to='/signup'>Sign Up</Link></li>
        </ul>
    </div>
</nav>

<ul id='mobile-sidenav-menu' className="sidenav">
    <li><Link to="#" className="sidenav-close right pink-text lighten-1">X</Link></li>  <li><Link className="link-font-size" to='/'>HOME</Link></li>
    <li><Link className="link-font-size" to='/about'>About</Link></li>
    <li><Link className="link-font-size" to='/contact'>Contact</Link></li>
    <li><Link className="link-font-size" to='/login'>Login</Link></li>
    <li><Link className="link-font-size" to='/signup'>Sign Up</Link></li>
</ul>

编辑：

Vanilla JS 初始化：

 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });

重新项目设置

查看这篇文章。 Matt 的组件设置如下：

 import React from 'react';

 import 'materialize-css/js/waves.js'
 import 'materialize-css/js/buttons.js'
 import 'materialize-css/js/carousel.js'
 import 'materialize-css/sass/materialize.scss'


class App extends React.component {

    componentDidMount() {

        const elems = window.document.querySelectorAll('.carousel');
        const options = {};
        window.M.Carousel.int(elems, options);
    }

    render(){...}

}

这可能会有所启发...？

https://medium.com/@mattdlockyer/youre-using-materialize-css-wrong-470b593e78e9

【讨论】：

它没有，sidenav 的行为仍然与@Doughballs 相同
不知道每次导航后是否需要重新初始化sidenav()？对我来说似乎是多余的。但是如果页面已经重新渲染，sidenav 从技术上讲是 M 不知道的新 dom 元素？动态添加的元素总是必须在 Materialise 中重新初始化。试试看，如果它有效，我会更新我的答案。所以我猜在导航的每个渲染上，你都会运行一个新的 $('.sidenav').sidenav();
由于我使用 Materialize CDN，如何在 React 组件中重新初始化 sidenav()？
这些是你的初始化：您正在使用 CDN 作为基础实现，但所有初始化都在您的自定义 JS 中调用。
好的，您正在通过 cdn 提供基本的物化 js 文件，这完全没问题。这可以提供一次。初始化是某些组件实际工作所需要的。如果您不运行函数 $('.sidenav').sidenav()，那么您的 sidenav 将无法工作。因此，您可以在自定义 javascript 文件中或在脚本标记之间运行它，通常每个站点只需执行一次。但我的理论是，在导航操作之后，sidenav 正在重新渲染 - 对吗？这可以解释为什么它停止工作 - 它已被重新添加到 dom 并且 init 已经运行。