当我使用链接或导航链接导航到React组件时,我的Materialize CSS sidenav汉堡包菜单不起作用

问题描述 投票:0回答:1

在移动视图上,每当我使用Link或NavLink导航到React组件并且浏览器不刷新时,我的实现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个回答
0
投票
根据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); });

RE PROJECT SETUP

查看此文章。 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

© www.soinside.com 2019 - 2024. All rights reserved.