无法使用 nextjs 正确创建主布局答案

【问题标题】：Can not properly create a main layout with nextjs无法使用 nextjs 正确创建主布局
【发布时间】：2018-07-25 08:20:17
【问题描述】：

我是 React 和 Next 的新手，我想做的是将我的主要内容包装在一个布局中，该布局将在我的页面上共享。

在我的组件文件夹中，我创建了一个 Layout.js 文件：

import Head from 'next/head';

import Header from './main/Header';
import Footer from './main/Footer';

import '../styles/main.scss';

const Layout = (props) => (
  <div>
    <Head>
      <title>Testing</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <link rel="stylesheet" href="/_next/static/style.css" />
    </Head>
    <div className="app">
      <Header />
      {props.children}
      <Footer />
    </div>
  </div>
);

export default Layout;

我在 pages 文件夹中的 index.js 文件中使用它：

import React, { Component } from 'react';

import Layout from '../components/Layout';

export default class extends Component {
  render() {
    return (
      <Layout>
        <h1>Hello</h1>
      </Layout>
    );
  }
};

结果是这个错误：

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

我敢打赌，我在 Layout.js 文件中做错了什么，但我不明白如何准确修复它。我希望你能帮忙。谢谢

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

为什么要加

    <Head>
      <title>Testing</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <link rel="stylesheet" href="/_next/static/style.css" />
    </Head>`

在您的Layout 组件中？我认为头部标签应该在pages/_document.js。请参阅我的repository，这对我来说很好用

【讨论】：

感谢您的有用评论。它帮助我改进了我的应用程序，但问题出在我的 Header 内部，我在其中使用了 Link，而其中没有 a。
我是这么想的

【解决方案2】：

来自 Next.js 的文档：

注意：
之外的 React-components 不会被浏览器初始化。

所以你必须覆盖默认的 App 组件。
要覆盖，请创建 ./pages/_app.js 并将其放入其中。您必须调整模块的导入。

import React from 'react'
import App, {Container} from 'next/app'
import Layout from '../components/Layout
import Header from '../components/main/Header'
import Footer from '../components/main/Footer'

export default class MyApp extends App {
  render () {
    const {Component, pageProps} = this.props
    return (
      <Container>
        <div className="app">
          <Header />
          <Layout>
            <Component {...pageProps} />
          </Layout>
        <Footer />
        </Container>
      </div>
    )
  }
}

【讨论】：