skip to Main Content

this is the error code i get each i run my project on a browser:

export ‘useHistory’ (imported as ‘useHistory’) 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_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, 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)

2

Answers


  1. We get this error because the useHistory() hook has been replaced by the useNavigate() hook in react-router-dom v6. We need to change the useHistory hook to the useNavigate hook. The useNavigate() hook returns a function that allows us to navigate between pages programmatically.

    To solve this we can use,

    import {useNavigate} from 'react-router-dom';
    
    const navigate = useNavigate();
    

    we import ‘useNavigate’ instead of ‘useHistory’ because React Router version 6 changed the ‘useHistory()’ hook to ‘useNavigate()’. All that is going on is a button that will be clicked to navigate from our Home Page.

    For more details, you can go here https://reactjsguru.com/usehistory-was-not-found-in-react-router-dom/

    Login or Signup to reply.
  2. import {useNavigate} from ‘react-router-dom’;

    const navigate = useNavigate();

    Now, we use useNavigate() instead of useHistory, to move from one page to another in react, & have to just import useNavigate from react router dom.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search