render Next.js 没有返回任何内容

Question

我开始研究next.js技术，我该如何解决这个错误，请你能帮我吗？ 问题的根源是什么？ 在此处输入图片说明

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

Answer 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>
    </>
)