reactjs - 当我使用 Link 或 NavLink 导航到 React 组件时,我的 Materialize css sidenav 汉堡菜单不起作用
问题描述
在移动视图上,每当我使用 Link 或 NavLink 导航到 React 组件并且浏览器不刷新我的物化 css sidenav 汉堡菜单时,我的实体化 css sidenav 汉堡菜单将变得静止且不可点击,但是当我重新加载页面时,sidenav 汉堡菜单将再次变为可点击。我知道这对我的移动用户来说不是一个好的用户体验。我已经尝试使用锚标记,但是如果每次单击浏览器都会重新加载,那么构建单页应用程序的目的就会失败。任何帮助、线索或建议将不胜感激。这是我尝试过的:
索引.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>
导航栏.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
解决方案
根据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
推荐阅读
- ssms - 为什么我不能在 Microsoft SQL Server Management Studio 18 中使用某些键盘快捷键?
- next.js - Next.js 自定义错误页面在使用 vercel 部署时不起作用
- javascript - 如何记录 Chart.js 工具提示的回调(对象)?(v3.0)
- javascript - 如何使用angularJs实现文件下载我们的自定义目录?
- google-apps-script - 将表格从 Google Sheet 复制到 Google Doc,并从源代码中保留边框和对齐方式
- docker - Notary 中路径的目的是什么?
- json - 在 Flutter 中使用 data.json 文件发出 post 请求
- javascript - js它给出了一个包围错误,但它没有出现。JS
- javascript - 单击按钮时如何调用函数?
- html - 从 html 按钮节点 js 触发 cmd 命令或 exe 文件