基于 react-router-dom V6.x 的配置问题

Question

如题，新人尝试从零开始配置，react-router-dom 时遇到的问题，
报错如下：

index.js?007a:15 Uncaught Error: [ProxyFacade] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

查了很久资料只知道 react-router-dom 升级到 V6 版本之后有关，
网上有以下说法，但是都没有实际效果：
1.说和 hot 有关系，但是 entry.jsx 里面去掉 hot 并没有效果
2.说和 React.Fragment 有关系，但是 home.jsx 里面修改并没有效果

代码如下：

//app.jsx
import React from 'react';
import { 
    BrowserRouter as Router, 
    Routes, 
    Route 
} from "react-router-dom";
import Home from "views/home/index.jsx";
export default function router(){
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home/>} />
            </Routes>
        </Router>
    );
}

// home.jsx
import React from 'react';
export default function Home() {
    return (
        <div style={{ padding: 20 }}>
            <h2>Home View</h2>
            <p>在React中使用React Router v6 的指南</p>
        </div>
    );
}

2022/02/15 补充：
尝试改 Route，中的 Home 引入为相同代码，相同内容的包错
尝试删除所有的 Route，但是保留 Routes 可以运行，
尝试在 Routes，添加 React.Fragment 没有问题，
尝试在 Routes, 添加 h1，相同内容的报错，
大致确定是 Routes 不支持 element？
我想办法去翻翻官方文档，和相关依赖的版本支持

Answer 1

参考文档：
https://github.com/remix-run/...

结论：
是 react-hot-loader 的问题，
建议直接 uninstall 掉之后再回收相关的调用，
再你的 .babelrc 和 config 里面的 hot 配置不要忘记，
问题描述中的 hot 修改 仅限于 hot(<Index />) 的回收