时间戳

首页 > 解决方案 > 渲染 Next.js 没有返回任何内容

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

问题描述

我开始看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

标签： javascriptreactjsnext.js

解决方案

在您的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>
    </>
)

推荐阅读