Nextjs Bootstrap 服务器端呈现的下拉问题

Question

我正在尝试构建一个具有下拉菜单且链接很少的导航。它在浏览器上运行良好。但是下拉列表的 HTML 未在页面源代码中呈现。

导航组件

function Navigation() {
    return (
        <Navbar bg="light" expand="lg">
            <Link href="/" passHref>
                <Navbar.Brand>React-Bootstrap</Navbar.Brand>
            </Link>

            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Link href="/" passHref>
                        <Nav.Link>Home</Nav.Link>
                    </Link>

                    {/* Missing html on page source */}
                    <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.Divider />
                        <NavDropdown.Item href="#action/3.4">
                            Separated link
                        </NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
}

我正在渲染来自 _app.js

的导航

import React from "react";
import Nav from "../components/nav";

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

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Nav />
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

在页面源上，我得到以下输出：

<div id="__next">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a href="/" class="navbar-brand">React-Bootstrap</a><button aria-controls="basic-navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed"><span class="navbar-toggler-icon"></span></button>
      <div class="navbar-collapse collapse" id="basic-navbar-nav">
         <div class="mr-auto navbar-nav">
            <a href="/" data-rb-event-key="/" class="nav-link">Home</a>
            <div class="nav-item dropdown"><a aria-haspopup="true" aria-expanded="false" id="basic-nav-dropdown" href="#" class="dropdown-toggle nav-link" role="button">Dropdown</a></div>
         </div>
      </div>
   </nav>
</div>

但是我看不到 HTML 那些下拉菜单相关的来源 HTML。

Answer 1

默认情况下，NavDropdown 组件不会在安装时呈现其子项，仅在单击时才会呈现。要强制在挂载上呈现导航项，您可以将 renderMenuOnMount 属性设置为 true。

<NavDropdown title="Dropdown" id="basic-nav-dropdown" renderMenuOnMount={true}>
    // ...
</NavDropdown>

Nextjs Bootstrap 服务器端呈现的下拉问题

Nextjs Bootstrap Dropdown issue with server side rendering

navbar

reactjs

react-bootstrap

server-side-rendering

next.js