react-router-dom 错误。切换指令

Question

我正在尝试使用 react-router-dom 进行反应导航，但我有一个无法解决的编译错误

这是我试过的。

import './App.css';
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from './Components/Navbar';
import Inicio from './Components/Inicio';
import Pedido from './Components/Pedido';
import Reservar from './Components/Reservar';
import IniciarSesion from './Components/IniciarSesion';
const App = () => {
  return (
    <Router>
      <Navbar/>
      <Switch>
        <Route path="/" component={Inicio} exact>
          <Inicio/>
        </Route>
        <Route path="/pedido" component={Pedido} exact>
          <Pedido/>
        </Route>
        <Route path="/reservar" component={Reservar} exact>
          <Reservar/>
        </Route>
        <Route path="/iniciarsesion" component={IniciarSesion} exact>
          <IniciarSesion/>
        </Route>    
      </Switch>
    </Router>
  );
};

export default App;

这就是错误。

Failed to compile.

Attempted import error: 'Switch' is not exported from 'react-router-dom' (imported as 'Switch').
ERROR in ./src/App.js 19:35-41
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, 
BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_HistoryRouter, unstable_useBlocker, unstable_usePrompt, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)

webpack compiled with 1 error

有人可以帮我吗？

Answer 1

你的

react-router-dom

版本是什么？

在版本中

6.x.x

<Switch>

被

<Routes>

取代。

如果你的库确实在版本

6.x.x

按照这个官方文档升级它：https://reactrouter.com/en/main/upgrading/v5#upgrade-all-switch-elements-to-routes

你也可以看看 data routers 它带来了很多很酷的功能，比如当页面包含未保存的更改时防止用户离开页面