React点击按钮条件渲染Main组件触发未知错误排查

报错由Main组件的React导入语句写法错误导致。
JSX是React.createElement()的语法糖，旧版JSX转换规则会默认调用作用域内大写开头的React对象完成节点创建。你的Main组件中将React导入为小写开头的react变量，编译阶段找不到React标识符，直接触发渲染失败，和错误栈定位到Main组件的提示完全吻合。

1. 修正Main组件的导入语句，将首字母改为大写，修正后完整代码：

import React from "react";

export default function Main() {
    return (
        <h1>hello </h1>
    )
}

2. 清理冗余语法：App组件条件渲染块末尾多写了一个无用的闭合大括号，直接删除即可，修正后App的返回段代码：

return (
    <div>
    {console.log("start", startQuiz)}
    {startQuiz ? <Main /> : <Home handleClick={clickStart}/>}     
    </div>
)

修改完成后刷新页面，点击Home页的Start quiz按钮即可正常切换渲染Main组件。

内容的提问来源于stack exchange，提问作者program.exe