0

I'm using Ract 18.2.0 and I need to do some treatment when the url changed. I'm using the following code

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";

const Root = () => {
  const history = useHistory();

  useEffect(() => {
    return history.listen((location) => {
      console.log(`Current url : ${location.pathname}`);
    });
  }, [history]);

  return <>View</>;
};

export default Root;

But I'm getting this error

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_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)

I'm wondering if there is a way to implement this event using React 18.2.0.

Many thanks for your help.

Mino
  • 21
  • 2
  • React version isn't the issue here -- what version if `react-router-dom` are you using? – lux Nov 21 '22 at 16:38
  • I'm using react-router-dom 6.4.3 version – Mino Nov 21 '22 at 16:50
  • See the documentation for `react-router-dom` v6. Maybe [this](https://github.com/remix-run/react-router/blob/2c562a492c1ee254855e22edb7bf462056dcca75/docs/upgrading/v5.md#use-usenavigate-instead-of-usehistory) could help. – c0m1t Nov 21 '22 at 16:50
  • this answer must help you: https://stackoverflow.com/a/66971821/19027584 – Martinez Nov 21 '22 at 16:50
  • What I want to implement is the listen to catch the url change event – Mino Nov 21 '22 at 17:14

0 Answers0