React Router Dom v6 with Typescript: no exported member for Location and NavigateFunction-CodePudding

I want to pass the function returned by useNavigate and the instance returned by useLocation to another function using Typescript. However, their types: Location and NavigateFunction are not exported members of react-router-dom. Am I doing this wrongly?

Context is

I want to separate the actual redirection behaviour from the react component
This way, it's easier for me to test

Here's a sample


import { Location, NavigateFunction, useLocation, useNavigate} from "react-router-dom";

const myRedirectCallback = (location: Location, navFunc: NavigateFunction) => () => {
  // do something here and redirect afterwards
}

const MyComponent = () => {
  const location = useLocation();
  const navFunc = useNavigate();

  const onClick = myRedirectCallback(location, navFunc);

  return <div onClick={onClick}>Click me!</div>;

}

Using: react-router-dom: v6.3.0 typescript: 3.0.1

CodePudding user response：

React Router's types are not compatible with Typescript 3.0.1 (which was released 4 years ago)

You'll need to upgrade to a more modern version of typescript to use types from this library.