嘿，我要花几个小时才能用Nextjs设置基本的Bootstrap Navbar。
而且我还认为除了显示错误消息外，我还有其他问题。
另外，请让我知道如何使整体效果更好！我应该使用_app.js而不是Layout吗？
Pages / 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;
组件/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元素的子元素。
我正在将React Bootstrap（https://react-bootstrap.github.io/）与nextjs一起使用，它节省了大量工作。我将导航栏放在_app.js中，以避免重复代码。如果您使用的是nextjs路由器（就像我一样），则需要像这样包装每个Nav.Link项目：