是在 react-router-dom 版本 6 位不同，请查看下面的示例

https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);```

.NET 的第 5 版和第 6 版之间发生了相当大的变化react-router-dom。看来 Udemy 课程/教程正在使用第 5 版，其中您需要的只是Router提供路由上下文和Route只需要在此上下文中呈现的组件。然而，在版本 6 中，Route组件现在需要在组件中呈现Routes（这是 v5Switch组件的升级）。

介绍 Routes

v6 中最令人兴奋的变化之一是强大的新<Routes> 元素。这是对 v5<Switch> 元素的重大升级，具有一些重要的新功能，包括相对路由和链接、自动路由排名以及嵌套路由和布局。

错误消息非常清楚，将您的Route组件包装在一个Routes组件中。路线也不带孩子，它们将组件渲染为新elementprops上的JSX。

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

问题是你的 react-router-dom 版本。

可能是 5.1 或更高。

你可以试试（在终端）

npm install react-router-dom@5.3.0

然后你的代码就可以了，或者你最好根据新的 react-router-dom 重建你的代码。

尝试通过以下方式包装您的路线Routes：

import { Route, Routes } 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">
                <Welcome />
            </Route>
            <Route path = "/game">
                <Game />
            </Route>
            <Route path = "/leaderboard">
                <Leaderboard />
            </Route>
           </Routes>
        </div>
    );
}

export default App;

这可能是因为您使用的是 react-router-dom 版本 6 或更高版本。尝试：npm i react-router-dom@5.2.0 它应该可以工作。