问题

element={((<Home />), (<Header />))}>实际上是一个Comma Operator expression，<Header />在您的情况下，它在评估时返回最后一个操作数的值。

解决方案

转换react-router-dom@5代码

</Switch>
  ...
  <Route path="/home">
    <Header />
    <Home />
  </Route>
</Switch>

到react-router-dom@6API/syntax，用Switch组件替换Routes组件并将路由内容移动到Route组件的elementprop 上：

<Routes>
  ...
  <Route
    path="/home"
    element={(
      <>
        <Header />
        <Home />
      </>
    )}
  />
</Routes>

如果使用多个路由渲染标题组件，通常会创建渲染通用 UI 的布局路由Outlet和用于渲染其元素的嵌套路由。

例子：

import { Outlet } from 'react-router-dom';

const HeaderLayout = () => (
  <>
    <Header />
    <Outlet />
  </>
);

...

<Routes>
  ... routes w/o Header
  <Route element={<HeaderLayout />}>
    <Route path="/home" element={<Home />} />
    ... other routes to render with Header
  </Route>
</Routes>