求助：BrowserRouter内Route组件失效，旧教程代码无法运行

你遇到的问题确实是React Router版本升级带来的语法变更——你教程里的代码是React Router v5及更早版本的写法，而你当前安装的应该是v6版本，v6对路由的写法做了大幅调整，不再支持旧版的component属性和exact属性。

解决方法有两种： #

方法一：升级代码适配React Router v6

v6的路由写法有几个核心变化：

• 所有Route必须包裹在Routes组件内部（替代v5的Switch）
• 不再使用component属性，改用element属性传入组件的JSX实例
• 默认开启精确匹配，无需再写exact属性

修改后的代码如下：

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Welcome from './components/Welcome';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Welcome />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

方法二：降级到React Router v5版本

如果你想继续沿用教程里的旧写法，可以直接降级依赖包，在终端执行以下命令：

# npm 用户
npm install react-router-dom@5.3.0

# yarn 用户
yarn add react-router-dom@5.3.0

降级完成后，你原来的代码就能正常运行了。

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