JSX表达式报错排查：解决父元素问题后出现Unexpected token `>`错误

先理清楚错误逻辑 #

第一个“JSX expressions must have one parent element”错误是React的基本要求——组件返回的JSX必须被单个父元素包裹，你用<React.Fragment>或者<div>包裹的思路是完全正确的，新出现的Unexpected token >错误和这个包裹操作本身无关，大概率是代码其他地方的语法问题。

逐一排查可能的问题点 #

• 检查子组件内部语法：打开DesktopNav和MobileNav组件文件，仔细看有没有未闭合的标签、多余或缺失的符号。比如有没有把自闭合标签写成<Button（漏了/>），或者成对标签只写了开头没写结尾（比如<div>没加</div>）。
• 检查return语句的写法：如果你是在函数组件里返回这两个组件，要确保多行JSX被括号包裹。比如：

function App() {
  return (
    <>
      <DesktopNav />
      <MobileNav />
    </>
  );
}

如果直接写return <><DesktopNav /><MobileNav /></>单行没问题，但多行的话必须加括号，否则JS会把换行后的代码当成新语句，导致解析错误。

• 确认React导入和Fragment用法：如果用<React.Fragment>，要确保文件顶部已经导入了React：import React from 'react';。嫌麻烦的话可以用短语法<>代替，效果一样，还不用写全名称。
• 检查编译配置：如果是自己搭建的项目（非create-react-app这类脚手架），要确认编译工具（比如babel）已经配置了React相关预设，不然JSX语法无法被正确编译，就会出现这类token错误。
• 排查导入语句：看看导入DesktopNav和MobileNav的代码有没有写错，比如路径不对、引号不匹配，或者漏写了import关键字之类的低级错误。

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