I have a problem to redirect to another page in React js

Question

I want to go to another page when I click on the button and I try this code but I got this error “TypeError:Cannot read properties of undefined (reading ‘ push’)”

How I can solve it problem? Can anyone help me?

import { useHistory } from 'react-router-dom';

function app() {
  let history = useHistory();
  const redirect = () => {
    history.push('/pathOfMyPage ');
  }
  return (
    <div>
      <button onClick={redirect}>Click Here </button>
    </div>
  );
}

Answer 1

In react-router 6, the current version you'll get if you just run npm install react-router, useHistory no longer seems to exist. It seems you can use [useNavigate][1] instead:

import { useNavigate } from "react-router-dom";

...

  let navigate = useNavigate();
  const redirect = () => {
    navigate("/pathOfMyPage", { replace: false });
  }