Кнопка гамбургера свернуть навигационную панель начальной загрузки не отображает элементы навигации

у меня есть навигационная панель начальной загрузки в реакции, и когда размер экрана становится меньше, она сворачивает навигационную панель и меняет ее на раскрывающийся список гамбургеров, но когда вы нажимаете на нее, она не отображает элементы навигации

вот весь мой компонент навигационной панели:

import * as React from 'react';
import {NavLink, Link} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css"


export default function Navbar(Props) {
    return (

        <nav className="navbar navbar-dark bg-dark navbar-expand-sm" style={{marginTop: '-10px'}}>
            <Link className="Navbar-brand nav-link text-light col-1 mr-4" to="/">
                Logo
            </Link>
            <div className="row col-10 collapse navbar-collapse navbar-nav " id="navbarNav">
                <NavLink className="nav-item nav-link text-light col-2 mr-4 mr-md-1"  to="/customers">customers</NavLink>
                <NavLink className="nav-item nav-link  text-light col-2 mr-4 mr-md-1" to="/rentals">rentals</NavLink>
                <NavLink className="nav-item nav-link  text-light col-2 mr-4 mr-md-1" to="/movies">movies</NavLink>
            </div>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"/>
        </button>
            <NavLink className="nav-item nav-link text-light col-1 mr-2 mr-md-0 ml-3" to="/login">login</NavLink>
        </nav>
    );
};

reactjs javascript twitter-bootstrap hamburger-menu navbar
person mohammadtz55    schedule 12.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны включить jquery и popper.js для правильной работы этого раскрывающегося списка. Если вы их не установили, вы можете сделать следующее:

npm install jquery popper.js

Теперь вы включаете их в файл index.js в корневом каталоге проекта или в тот же файл. Если вы хотите использовать его во всем проекте, я предлагаю вам включить их в файл index.js (src/index.js).

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
person cse_vikashgupta    schedule 12.04.2020
comment
спасибо за ваш ответ, я сделал это, и теперь я получаю сообщение об ошибке, и его выбрасывают в коллапс. jqueryinterface: TypeError: не удается преобразовать объект в примитивное значение - person mohammadtz55; 12.04.2020
comment
Я отредактировал свой пост. Пожалуйста, убедитесь, что это порядок импорта, которому вы следуете. Просто скопируйте и вставьте, как указано выше. - person cse_vikashgupta; 12.04.2020
comment
я изменил его, и снова возникает та же ошибка из-за того, что jquery и propjs выделены серым цветом, поэтому index.js их не использует, возможно, это проблема - person mohammadtz55; 12.04.2020