React Router Dom: 'Switch' Component Not Found - Troubleshooting Guide
The error message '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_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)' indicates that the 'Switch' component is not available in the 'react-router-dom' library you're using. While the error message lists other possible exports, 'Switch' is missing. This usually stems from one of these reasons:
- Version Mismatch: 'Switch' was deprecated in React Router v6 and replaced with the
<Routes>component. If you're using an older version of React Router Dom, you might need to update it. - Incorrect Import: Ensure you're importing 'Switch' from the correct location. Double-check your import statement.
To fix this, take the following steps:
- Update React Router Dom: Upgrade to the latest version of 'react-router-dom'.
- Replace 'Switch' with
<Routes>: If you're using React Router v6 or higher, replace the 'Switch' component with<Routes>for proper route handling. - Verify Import: Make sure you're importing 'Switch' correctly from 'react-router-dom'.
Example (React Router v6):
import { Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
</Routes>
);
}
By addressing these potential causes, you should resolve the 'Switch' not found error and get your React Router Dom routing working correctly.
原文地址: https://www.cveoy.top/t/topic/mkWF 著作权归作者所有。请勿转载和采集!