react-router报错Route仅能作为Routes子元素，求修复方案

问题原因 #

• 导入配置错误：你在导入时给BrowserRouter设置了错误的别名Routes，react-router-dom v6中BrowserRouter、Routes、Route是三个独立的API，不能混淆使用。
• 层级结构错误：<Route>必须作为<Routes>的直接子元素，不能被div等其他标签嵌套在中间。
• API使用错误：v6版本的<Route>已废弃component属性，改用element属性传入组件实例，同时不需要额外加exact参数，默认执行精确路由匹配。

修正后代码 #

import Home from './pages/Home';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
  return ( 
    <Router>
      <div className="max-w-screen-md mx-auto pt-20">
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}
export default App;

内容的提问来源于stack exchange，提问作者MR.Shohel