Материализация CSS sidenav не работает на маршрутах с тегом <Link>, но работает на компонентах с <a> - PullRequest
Новая
       39

Материализация CSS sidenav не работает на маршрутах с тегом <Link>, но работает на компонентах с <a>

0 голосов
/ 15 января 2019

Я использую реакцию и материализацию для проекта! На navbar есть несколько ссылок (например, home, about), которые создаются с помощью тегаact-router-dom, когда я нажимаю на эту ссылку и перехожу к этому компоненту. Sidenav перестает работать и ничего не происходит, когда я нажимаю кнопку sidenav. Хотя, когда я перезагружаю страницу, она снова начинает работать. Но когда я заменяю те же ссылки тегом и меняю 'на' на 'href', тогда Sidenav начинает работать над этим компоненты тоже. Итак, как мне заставить sidenav работать с компонентами, управляемыми тегом Link или NavLink реактивного маршрутизатора?

Navbar.js: 

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


class Navbar extends Component {

    render() {

        return (
            <nav>
                <div className="nav-wrapper">
                    <div className="container">
                        <Link to="/" className="brand-logo center">CALM</Link>

                        <Link to="#" data-activates="slide-out" className="button-collapse show-on-large">
                            <i className="material-icons right">menu</i>
                        </Link>

                        <ul className="side-nav grey lighten-2" id="slide-out">
                            <li><Link to="/">HOME</Link></li>
                            <li><Link to="/rooms">ROOMS</Link></li>
                            <li><Link to="/front">LOGOUT</Link></li>
                        </ul>
                    </div>
                </div>
            </nav>
        )
    }

}

экспорт по умолчанию Navbar;

...