使用 nextjs 正确链接引导导航栏答案

【问题标题】：Linking a Bootstrap Navbar correctly with nextjs使用 nextjs 正确链接引导导航栏
【发布时间】：2019-12-25 02:47:32
【问题描述】：

嘿，我正在努力使用 Nextjs 设置一个基本的 Bootstrap 导航栏。

而且我还认为除了显示的错误消息之外，我还有其他问题。

另外，请告诉我如何让这一切变得更好！我应该使用 _app.js 而不是 Layout 吗？

页面/index.js

import Layout from "../components/Layout";

class Page extends React.Component {
  render() {
    return (
      <Layout>
        <div className="container">
          <div className="starter text-center">
            <h1>Bootstrap starter template</h1>
            <p className="lead">
              Use this document as a way to quickly start any new project.
              <br /> All you get is this text and a mostly barebones HTML
              document.
            </p>
          </div>
        </div>
      </Layout>
    );
  }
}

export default Page;

关于页面看起来几乎一样

组件/Header.js

import Link from "next/link";

class Header extends React.Component {
  render() {
    return (
      <header>
        <nav className="navbar navbar-expand-md navbar-dark bg-dark">
          <a className="navbar-brand" href="/">
            Home
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>

          <div className="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item active">
                <div>
                  <Link href="/about">
                    {" "}
                    <a className="nav-link">About</a>{" "}
                  </Link>
                </div>
              </li>
            </ul>
          </div>
        </nav>
      </header>
    );
  }
}

export default Header;

components/Layout.js

import Head from 'next/head'
import Header from './Header'
import Footer from './Footer'

import bootstrapStyle from 'bootstrap/dist/css/bootstrap.css'
import fontawesomeStyle from 'font-awesome/css/font-awesome.css'
import stylesheet from 'styles/index.scss'

const Layout = ({ children, title }) => (
  <div>
    <Head>
      <title>{ title }</title>
      <meta charSet='utf-8' />
      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
      <style dangerouslySetInnerHTML={{ __html: bootstrapStyle }} />
      <style dangerouslySetInnerHTML={{ __html: fontawesomeStyle }} />
      <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    </Head>
    <Header />
    
    { children }

    <Footer />
  </div>
)

export default Layout

React.Children.only 期望接收单个 React 元素子元素。

【问题讨论】：

错误信息出现在哪里？

标签： reactjs bootstrap-4 next.js

【解决方案1】：

我将 React Bootstrap (https://react-bootstrap.github.io/) 与 nextjs 一起使用，它可以节省大量工作。我已将导航栏放在 _app.js 中以避免重复代码。如果您使用的是 nextjs 路由器（就像我一样），那么您需要像这样包装每个 Nav.Link 项目：

        <Link href="/index" passHref>
          <Nav.Link>Home</Nav.Link>
        </Link>

【讨论】：