将 next js 用于静态网站

Question

错误 - React.Children.only 预期接收单个 React 元素子元素。在相同的上下文中有很多问题，我尝试了这些解决方案但没有找到解决方案。

网站的导航栏是给我错误的原因。 Navbar 上方有一个部分可以正确呈现，当我尝试呈现下方的 Navbar 时，它会抛出错误。

import Link from 'next/link'
import Head from '../components/head'
import Download from '../components/nav'
import NavBar from '../components/header'
import Footer from '../components/footer'
import htmlContent from 'html-loader!../legacy/index.html'



const Homepage = () => (

  <div>
 <Head />
 <Download/>
<NavBar />
<div dangerouslySetInnerHTML={{__html: htmlContent}} />
    <Footer />
  </div>

);
export default Homepage

页脚显示正确，head 标签用于所有元数据等（也有效）。 Github link 全部代码是-https://github.com/yohanelly/website-jsx/tree/master/components

Answer 1

问题出在 Link 和 a 标签之间的空格。

<Link href="#"> <a className="menu-links features">Features</a></Link>

应该是

<Link href="#"><a className="menu-links features">Features</a></Link>

或

<Link href="#">
    <a className="menu-links features">Features</a>
</Link>

阅读 React 文档的 Children in JSX 部分了解更多信息。

将 next js 用于静态网站

Using next js for a static website

jsx

reactjs

nextjs