无法在NextJS中使用React-Bootstrap，请求技术帮助

问题根源 #

你的代码存在组件命名冲突：从react-bootstrap导入的Navbar组件，和你自定义的函数组件同名（const Navbar = () => {...}），这会导致第三方组件被覆盖——渲染时JSX里的<Navbar>实际指向你自己定义的组件，进而引发错误。

解决步骤 #

1. 重命名自定义组件：将你的Navbar组件改为其他名称（比如SiteNavbar），避免和第三方组件名重复；
2. 确认样式导入正确：确保_app.tsx中Bootstrap样式的导入位置在组件定义之前。

修正后的组件代码 #

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

// 重命名自定义组件，避免命名冲突
const SiteNavbar = () => {
    return (
        <>
            <Navbar bg="light" expand="lg">
                <Container>
                    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="me-auto">
                            <Nav.Link href="#home">Home</Nav.Link>
                            <Nav.Link href="#link">Link</Nav.Link>
                            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.2">
                                    Another action
                                </NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                <NavDropdown.Divider />
                                <NavDropdown.Item href="#action/3.4">
                                    Separated link
                                </NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar> 
        </>
    )
}

export default SiteNavbar

额外检查项 #

• 确认依赖已正确安装：

  yarn add react-bootstrap bootstrap
  

• _app.tsx中的样式导入代码示例：

  import 'bootstrap/dist/css/bootstrap.min.css';
  import type { AppProps } from 'next/app';
  
  export default function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
  }
  

内容的提问来源于stack exchange，提问作者Yun