Question

我开始研究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

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

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

1 个答案: