react-router-dom中Switch组件无法使用问题求助

核心原因是你使用的react-router-dom v6版本已经移除了Switch组件，同时Route组件的API也发生了变化，这和教程基于v5的写法不兼容。

解决方案一：适配react-router-dom v6写法 #

修改代码如下：

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./components/Home";
import Dashboard from "./components/Dashboard";
import LogIn from "./components/LogIn";
import SignUp from "./components/SignUp";
import { AuthProvider } from "./components/Auth";

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="/dashboard" element={<Dashboard />} />
          <Route exact path="/login" element={<LogIn />} />
          <Route exact path="/signup" element={<SignUp />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
};

export default App;

关键修改点：

• 导入Routes替代原来的Switch
• 将Route的component={组件名}替换为element={<组件名 />}

解决方案二：降级到react-router-dom v5 #

如果想和教程写法完全一致，可以降级到v5版本，执行以下命令：

npm install react-router-dom@5
# 或者用yarn
yarn add react-router-dom@5

降级后你的原有代码就能正常运行。

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