react-router报错Route仅可作为Routes子元素的原因及解决方法

这是React Router v6与v5版本的语法不兼容问题：

• 你参考的Udemy教程使用的是v5版本语法，而你本地安装的是v6版本
• v6强制要求所有<Route>组件必须作为<Routes>组件的直接子节点，不能直接嵌套在普通div中
• 同时v6不再支持将渲染组件作为<Route>的子元素传入，必须通过element属性传递

仅需要修改App.js文件，index.js代码无需调整：

1. 从react-router-dom中新增导入Routes组件
2. 用<Routes>包裹所有<Route>节点
3. 调整每个<Route>的组件传递方式为element属性

修正后的完整App.js代码如下：

import { Routes, Route } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";

function App() {
    return (
        <div>
            <Routes>
                <Route path="/welcome" element={<Welcome />} />
                <Route path="/game" element={<Game />} />
                <Route path="/leaderboard" element={<Leaderboard />} />
            </Routes>
        </div>
    );
}

export default App;

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