反應引導導航欄折疊漢堡按鈕不顯示導航項目

Question

我在反應中有一個引導導航欄，當屏幕尺寸變小時，它會折疊導航欄並將其更改為漢堡下拉菜單，但是當您單擊它時，它不會顯示導航項目

這是我的整個導航欄組件：

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>
    );
};

Answer 1

您必須包含 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';