嘿，我花了几个小时才用Nextjs设置了一个基本的Bootstrap导航栏。
我还认为除了显示的错误消息之外，我还有其他问题。
另外，请告诉我如何使它更好！我应该使用_app.js而不是布局吗？
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;“关于”页看起来几乎相同
components/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 LayoutReact.Children.只能接收一个React元素的子元素。
2条答案
按热度按时间uurv41yg1#
我正在使用React Bootstrap（https://react-bootstrap.github.io/）和nextjs，它节省了很多工作。我已经将导航栏放在_app.js中以避免重复代码。如果你正在使用nextjs路由器（就像我一样），那么你需要像这样 Package 每个Nav.Link项目：
i2loujxw2#
我在Next.JS 13上使用react-bootstrap v2.7.2（Bootstrap 5.2），我发现的一个解决方案是在
Nav.Link上使用as属性。使用上面的方法对我来说仍然不能正确渲染。以下是该方法的文档。https://react-bootstrap.github.io/components/navbar/#api
示例用法。