使用 nextjs 正确链接 Bootstrap 导航栏

Question

使用 nextjs 正确链接 Bootstrap 导航栏

嘿，我花了几个小时努力用 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;

Run Code Online (Sandbox Code Playgroud)

关于页面看起来几乎一样

组件/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;

Run Code Online (Sandbox Code Playgroud)

组件/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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

小智 5

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

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

Run Code Online (Sandbox Code Playgroud)

默认情况下，这在下一个 v13.xx 中将不再起作用，但是，您可以将 `legacyBehavior` 属性添加到 `<Link />` 中，这样它将再次起作用。接下来 13 个迁移文档：https://nextjs.org/docs/advanced-features/codemods#new-link (3认同)

归档时间：	6 年，9 月前
查看次数：	6119 次
最近记录：	5 年，7 月前