我正在创建Next.js应用，并且正在尝试集成react-bootstrap。
我已经设法添加了依赖关系，但是现在当我尝试使用汉堡菜单在移动设备上折叠导航栏时，什么也没有发生。
这是我的文件的样子：
Navbar.js
import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
const BaseNavbar = () => (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-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>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
export default BaseNavbar;
_ app.js
import 'bootstrap/dist/css/bootstrap.min.css'
import React from 'react';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
我的package.json中的依赖项
"dependencies": {
"bootstrap": "^4.5.0",
"next": "9.4.4",
"react": "16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "16.13.1"
}
如何解决此问题？我不确定我缺少什么！
问题是我将Navbar组件放在_document.js文件中，如下所示：
import Document, { Html, Head, Main, NextScript } from 'next/document'
import BaseNavbar from '../components/navbar';
import Footer from '../components/footer';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Navbar />
<Main />
<Footer />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
但是它不能像这样工作，所以我将导航栏组件移到了页面上，现在可以使用了