React报错JSX表达式必须有一个父元素.ts(2657)求解决

错误原因 #

React要求组件return的JSX必须只有一个根元素，你的代码里直接返回了两个同级的顶级元素：外层<div>和<BrowserRouter>，这违反了JSX的语法规则，因此触发了该错误。

另外注意：你的代码里存在重复的header结构，且第一个header用了原生<a>标签，在React Router环境下应该使用<Link>组件实现路由跳转，避免页面刷新。

解决方案 #

有两种常用修复方式：

方法1：用外层<div>包裹所有元素 #

给return里的所有顶级元素套一个父<div>，同时整合重复的路由内容：

function App() {
  return (
    <div>
      <BrowserRouter>
        <div>
          <header>
            <Link to="/">amazona</Link>
          </header>
          <main>
            <Routes>
              <Route path="/product/:slug" element={<ProductScreen />} />
              <Route path="/" element={<HomeScreen />} />
            </Routes>
          </main>
        </div>
      </BrowserRouter>
    </div>
  );
}

注：原始代码里的首页商品列表内容，应该放到<HomeScreen>组件内部，通过路由渲染，避免代码冗余。

方法2：使用React Fragment（无额外DOM节点） #

如果不想在DOM中增加多余的<div>，可以用<Fragment>（或简写<>...</>）包裹，它不会生成额外DOM元素：

// 用完整Fragment需要导入，简写形式无需导入
import { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <BrowserRouter>
        <div>
          <header>
            <Link to="/">amazona</Link>
          </header>
          <main>
            <Routes>
              <Route path="/product/:slug" element={<ProductScreen />} />
              <Route path="/" element={<HomeScreen />} />
            </Routes>
          </main>
        </div>
      </BrowserRouter>
    </Fragment>
    // 简写形式：
    // <>
    //   <BrowserRouter>...</BrowserRouter>
    // </>
  );
}

关键提醒 #

• 所有JSX内容必须被单个父元素/片段包裹
• React Router环境下，统一用<Link>替代原生<a>标签实现跳转
• 页面内容要和路由配置对应，避免重复编写结构

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