旧版react-router-dom代码适配v6报错，求助解决Switch缺失问题

现有文件代码 #

consts.js #

export const ADMIN_ROUTE = '/admin'
export const LOGIN_ROUTE = '/login'
export const REGISTRATION_ROUTE = '/registration'
export const SHOP_ROUTE = '/'
export const BASKET_ROUTE = '/basket'
export const DEVICE_ROUTE = '/product'

routes.js #

import Admin from "./pages/Admin"
import Auth from "./pages/Auth"
import Basket from "./pages/Basket"
import DevicePage from "./pages/DevicePage"
import Shop from "./pages/Shop"
import {
  ADMIN_ROUTE,
  BASKET_ROUTE,
  DEVICE_ROUTE,
  LOGIN_ROUTE,
  REGISTRATION_ROUTE,
  SHOP_ROUTE
} from "./utils/consts"

export const authRoutes = [
  {
    path: ADMIN_ROUTE,
    Component: Admin
  },
  {
    path: BASKET_ROUTE,
    Component: Basket
  }
]

export const publicRoutes = [
  {
    path: SHOP_ROUTE,
    Component: Shop
  },
  {
    path: LOGIN_ROUTE,
    Component: Auth
  },
  {
    path: REGISTRATION_ROUTE,
    Component: Auth
  },
  {
    path: DEVICE_ROUTE + '/:id',
    Component: DevicePage
  },
]

App.js #

import { BrowserRouter } from "react-router-dom";
import AppRouter from "./components/AppRouter";

function App() {
    return (
      <BrowserRouter>
        <AppRouter/>
      </BrowserRouter>
    );
}

export default App;

AppRouter.js #

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { authRoutes, publicRoutes } from '../routes';

const AppRouter = () => {
  const isAuth = false;
  return (
    <Switch>
      {isAuth && authRoutes.map(({path, Component}) => 
        <Route key={path} path={path} component={Component} exact />
      )}
      {publicRoutes.map(({path, Component}) => 
        <Route key={path} path={path} component={Component} exact />
      )}
    </Switch>
  );
};

export default AppRouter;

遇到的错误 #

运行代码时出现错误：

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

已知react-router-dom@6.0移除了Switch组件，但不清楚如何修改现有代码适配v6版本。

react-router-dom v6对路由API做了核心调整，对应修改点如下：

1. 用Routes替代Switch：Routes是v6中包裹路由规则的核心组件
2. Route组件component属性改为element：需要传入JSX元素（而非组件引用）
3. 移除exact属性：v6默认采用精确匹配逻辑，无需手动声明
4. 用Navigate替代Redirect：重定向功能由Navigate组件实现

修改后的AppRouter.js代码如下：

import React from 'react';
// 替换为v6的路由API
import { Routes, Route, Navigate } from 'react-router-dom';
import { authRoutes, publicRoutes } from '../routes';
// 引入路由常量用于重定向逻辑
import { SHOP_ROUTE, LOGIN_ROUTE } from '../utils/consts';

const AppRouter = () => {
  const isAuth = false;
  return (
    <Routes>
      {/* 授权路由：登录后可访问，未登录则跳转到登录页 */}
      {authRoutes.map(({ path, Component }) => 
        <Route 
          key={path} 
          path={path} 
          element={isAuth ? <Component /> : <Navigate to={LOGIN_ROUTE} replace />} 
        />
      )}
      {/* 公开路由：所有用户均可访问 */}
      {publicRoutes.map(({ path, Component }) => 
        <Route key={path} path={path} element={<Component />} />
      )}
      {/* 处理未匹配的路由，统一重定向到首页 */}
      <Route path="*" element={<Navigate to={SHOP_ROUTE} replace />} />
    </Routes>
  );
};

export default AppRouter;

额外说明 #

• 若要保留原逻辑（未登录时不渲染授权路由），可继续使用isAuth &&的判断，但更推荐上面的重定向方案，体验更友好
• 确保项目安装的是react-router-dom v6版本，版本较低可执行命令升级：

  npm install react-router-dom@latest
  

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