How can you use the useHistory hook in React Router v5 to navigate programmatically within a functional component

Question

With the help of code can i know How can you use the useHistory hook in React Router v5 to navigate programmatically within a functional component?

Answer 1

In React Router v5, the useHistory hook is used to navigate programmatically within a functional component.

Usage:

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

function MyComponent() {

  const history = useHistory();

  const handleClick = () => {

    history.push('/about'); // Navigate to /about

  };

  return <button onClick={handleClick}>Go to About</button>;

}