Question

我正在创建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"
  }

如何解决此问题？我不确定我缺少什么！

Answer 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

但是它不能像这样工作，所以现在我从_document.js文件中删除了导航栏。我还创建了一个Layout.js组件：

import BaseNavbar from './Navbar';
import Footer from './Footer';
import React from 'react';
import Head from 'next/head';

const Layout = props => (
      <div className="Layout">
        <BaseNavbar />
         <div className="Content">
          {props.children}
         </div>
         <Footer />
      </div>
)

export default Layout;

对于应用程序的每个页面，我都调用此组件，它将呈现我的导航栏，例如，这是我的about.js：

import Banner from '../components/Banner';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import React from 'react';
import Layout from '../components/Layout';

const About = () => (
    <Layout>
        <Banner name="Mon cursus" />
        <main className="mt-5">
            <Container>
                <Row>
                  About
                </Row>
            </Container>
        </main>
    </Layout>
)

export default About;

React Bootstrap导航栏不会折叠（Next.js）

1 个答案: