React使用<></>短语法报Unexpected token语法错误怎么修复？

你遇到的语法报错是当前项目的编译环境不支持React Fragment 短语法（也就是<></>写法）导致的，<>是React.Fragment的简写形式，部分旧版本的React、babel编译工具默认不支持该语法。

• 方案1（兼容性最优，无需修改配置）：将短语法替换为完整的React.Fragment写法，修改你的Layout组件return部分代码即可：

const Layout = (props) => {
  return(
    <React.Fragment>
      <Header />
      {props.children}
    </React.Fragment>
  )
}

• 方案2（保留短语法）：升级项目相关依赖适配短语法：
  1. 确认本地React版本 >=16.2.0，低于该版本则执行命令升级：npm install react@latest react-dom@latest
  2. 如果你使用create-react-app搭建的项目，升级react-scripts到最新版本：npm install react-scripts@latest
  3. 如果你是自定义babel配置的项目，需要安装@babel/plugin-transform-react-jsx插件并在babel配置中开启jsx短语法支持。

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