Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’

After updating your react-router-dom NPM you may fetch this error:

export 'Redirect' (imported as 'Redirect') 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_DataStaticRouterContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_HistoryRouter, useActionData, useAsyncError, useAsyncValue, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)
export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'

Actually this is a very simple error. But as you have updated NPM you may have this error multiple times in your application. You need to fix them all.

Solution

Update your Switch to Routes

import {Navigate} from 'react-router-dom';
......
<Navigate ......... />

instead of 

import {Redirect} from 'react-router-dom';
......
<Redirect......... />

You can find all errors by searching ‘Redirect’ in application. And then just replacing them with ‘Navigate’ using bulk replace.

Tags

Related Posts