切换汉堡菜单后导航栏不下拉

Question

我试图让我的导航栏响应，并在水平导航栏占用太多空间时将其变成汉堡菜单。但是，当我尝试切换汉堡菜单时，没有弹出任何导航链接。任何帮助将不胜感激！

import { Link } from 'react-router-dom'
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import React from 'react';

// in the function the return will show what the html will look like
function TransportNavbar({ user }) {

    const expandBreakpoint = "md"; /* Change this to update breakpoint*/

    return (
        // made sure there is only one html tag at the top level of the return statement
        <>
            <Navbar bg="navBackground" variant="dark" expand={expandBreakpoint}>
                <Container fluid>
                    <div
                        style={{ width: "56px" }}
                        className={`d-block d-${expandBreakpoint}-none`}>
                    </div>

                    <Navbar.Toggle aria-controls='basic-navbar-nav' />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className='m-auto'>

                            <React.Fragment>

                                    <Nav.Link href="./JobViewer" className={`d-none d-${expandBreakpoint}-block`}>View Jobs</Nav.Link>
                                    <Nav.Link href="./JobViewer" className={`d-none d-${expandBreakpoint}-block`}>Add Job</Nav.Link>
                                    <Nav.Link href="./JobViewer" className={`d-none d-${expandBreakpoint}-block`}>Edit Job</Nav.Link>
                                    <Nav.Link href="./ManageUsers" className={`d-none d-${expandBreakpoint}-block`}>Manage Users</Nav.Link>
                                    <Nav.Link href="./TruckViewer" className={`d-none d-${expandBreakpoint}-block`}>Trucks</Nav.Link>
                                    <Nav.Link href="./AccountSettings" className={`d-none d-${expandBreakpoint}-block`}>Account Settings</Nav.Link>

                                </React.Fragment>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </>
    );
}
export default TransportNavbar;