使用 react-bootstrap 崩溃时无法将导航栏转到 function

Question

我正在使用 react-bootstrap 创建响应式导航栏，但由于某种原因它不起作用。 我尝试使用 react-router-dom 来处理页面更改并使用导航栏创建 function 来处理页面更改，以查看是否是问题所在。 汉堡包图标甚至不只是呈现一个灰色的空白方块。

这是我当前的代码

这就是它呈现的内容

我还能尝试什么？

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar'
import '../css/Navbar.css'

export default function NavbarRender({ currentPage, handlePageChange }){
    return(
        <Navbar collapseOnSelect expand='sm' id='total-nav'>
            <Container>
                <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href="#about" onClick={() => handlePageChange('About')}
                        className={currentPage === 'About' ? 'nav-link active' : 'nav-link'} id="navbar">
                            About
                        </Nav.Link>
                        <Nav.Link href="#portfolio" onClick={() => handlePageChange('Portfolio')}
                        className={currentPage === 'Portfolio' ? 'nav-link active' : 'nav-link'} id="navbar">
                            Portfolio
                        </Nav.Link>
                        <Nav.Link href="#resume" onClick={() => handlePageChange('Resume')}
                        className={currentPage === 'Resume' ? 'nav-link active' : 'nav-link'} id="navbar">
                            Resume
                        </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
} 

Answer 1

我忘记导入 react-boostrap CSS 时遇到这个问题

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';