渲染 Next.js 没有返回任何内容答案

【问题标题】：Nothing was returned from render Next.js渲染 Next.js 没有返回任何内容
【发布时间】：2021-01-01 13:54:07
【问题描述】：

我开始研究next.js技术，我该如何解决这个错误，请你帮帮我？问题的根源是什么？enter image description here

import React from 'react'

import Button from "../components/button"

function HomePage() {
    return;
    <div>
      <h1>Welcome to Next.js!</h1>
      <Button> Merhaba </Button>
    </div>
    }
  
  export default HomePage

import React from 'react'
import styles from './button.module.css'

function Button ({children}) {
return <button type="button" className = {styles.button}>{children}</button> 
}


export default Button

【问题讨论】：

投票结束，因为问题是由拼写错误引起的。你需要return<div>，但是你把它放在一个新的行上，并且在它之前有一个分号。

标签： javascript reactjs next.js

【解决方案1】：

在您的 HomePage 功能组件中，您应该返回一个组件，但您的 return 语句后跟一个分号，它终止该行，因此您最终什么也不返回。

如果您希望您的组件与return 表达式位于不同的行，您可以将您的组件用括号括起来，如下所示：

return (
    <div>
        <h1>Welcome to Next.js!</h1>
        <Button> Merhaba </Button>
    </div>
)

但请注意，如果您不需要 <div> 标记用于样式或其他内容，则使用 React Fragment 包装您的组件被认为是一种更好的做法。

return (
    <>
        <h1>Welcome to Next.js!</h1>
        <Button> Merhaba </Button>
    </>
)

【讨论】：