React报错：HomePage组件渲染未返回任何内容该如何解决

报错原因 #

你遇到的Error: HomePage: Nothing was returned from render报错核心原因是HomePage箭头函数没有正确返回需要渲染的JSX结构：
ES6箭头函数的语法规则要求：

• 当函数体使用{}包裹时，必须显式使用return语句指定返回值
• 你当前的HomePage组件使用了{}包裹JSX，但没有写return，所以组件没有返回任何可渲染的内容，触发报错。

修复方案 #

有两种常用修复方式，任选一种即可：

方案1：显式添加return语句 #

在{}内的JSX结构前添加return关键字，代码如下：

import React from "react";

const HomePage = () =>{
    // 新增return关键字返回JSX
    return (
        <div className="homepage">
            <div className="directory-menu">
                <div className="menu-item">
                    <div className="content">
                        <h1 className="title">HATS</h1>
                        <span className="subtitle">SHOP NOW</span>
                    </div>
                </div>

                <div className="menu-item">
                    <div className="content">
                        <h1 className="title">JACKETS</h1>
                        <span className="subtitle">SHOP NOW</span>
                    </div>
                </div>

                <div className="menu-item">
                    <div className="content">
                        <h1 className="title">SNEAKERS</h1>
                        <span className="subtitle">SHOP NOW</span>
                    </div>
                </div>

                <div className="menu-item">
                    <div className="content">
                        <h1 className="title">WOMENS</h1>
                        <span className="subtitle">SHOP NOW</span>
                    </div>
                </div>

                <div className="menu-item">
                    <div className="content">
                        <h1 className="title">MENS</h1>
                        <span className="subtitle">SHOP NOW</span>
                    </div>
                </div>
            </div>
        </div>
    )
};

export default HomePage;

方案2：使用箭头函数隐式返回 #

把包裹函数体的{}替换为()，箭头函数会自动返回括号内的JSX结构，不需要手动写return，代码如下：

import React from "react";
// 将{}替换为()实现隐式返回
const HomePage = () => (
    <div className="homepage">
        <div className="directory-menu">
            <div className="menu-item">
                <div className="content">
                    <h1 className="title">HATS</h1>
                    <span className="subtitle">SHOP NOW</span>
                </div>
            </div>

            <div className="menu-item">
                <div className="content">
                    <h1 className="title">JACKETS</h1>
                    <span className="subtitle">SHOP NOW</span>
                </div>
            </div>

            <div className="menu-item">
                <div className="content">
                    <h1 className="title">SNEAKERS</h1>
                    <span className="subtitle">SHOP NOW</span>
                </div>
            </div>

            <div className="menu-item">
                <div className="content">
                    <h1 className="title">WOMENS</h1>
                    <span className="subtitle">SHOP NOW</span>
                </div>
            </div>

            <div className="menu-item">
                <div className="content">
                    <h1 className="title">MENS</h1>
                    <span className="subtitle">SHOP NOW</span>
                </div>
            </div>
        </div>
    </div>
);

export default HomePage;

修改完成后保存代码即可正常运行，App组件的代码无需改动。

内容的提问来源于stack exchange，提问作者LegeNNND