React报错DOM元素不识别computedMatch属性 全局Header路由如何配置

return (<Switch> 组件在 React Router v5 中仅允许 <Route> 或 <Redirect> 作为直接子元素，你当前代码中将 `<div id="test">` 作为第二个 <Switch> 的直接子节点，<Switch> 会自动给直接子元素传递路由专属的 `computedMatch` 等属性，而原生DOM元素div无法识别该React Router专属属性，因此触发报错。

# 正确实现方案
调整路由嵌套结构，将带Header的公共布局包裹在普通<Route>内部，不要作为<Switch>的直接子节点，修正后的代码如下：
## 修正后的Main组件代码
```jsx
const Main = () => (
  <>
    <Switch>
      {/* 无需Header的登录注册页优先匹配 */}
      <Route exact path="/login" component={FrontLogin} />
)

<Route path="/register" component={FrontRegister} />
  {/* 其余所有路由走带Header的通用布局 */}
  <Route path="/">
    <div id="test">
      <Header />
      <Switch>
        <PrivateRoute exact path="/home" component={FrontHome} />
        <PrivateRoute path="/:username" component={FrontProfile} />
        <Redirect to="/home" />
      </Switch>
    </div>
  </Route>
</Switch>

</>
);

## 实现逻辑说明
- 你原有index.js的代码逻辑没有问题，无需修改
- 外层<Switch>优先匹配不需要Header的登录、注册路径，匹配成功后不会执行后续路由逻辑
- 通用<Route>匹配所有非登录注册的路径，返回包含Header的公共布局，布局内部嵌套第二层<Switch>匹配具体的私有路由，此时div没有作为<Switch>的直接子节点，不会被传入路由专属属性，报错问题解决
- 全局Header只会在非登录/注册的页面展示，符合你最初的需求

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