Learn how to use the useHistory hook to get the most out of React’s functional components.

The useHistory hook allows us to access React Router’s history object.

Through the history object, we can access and manipulate the current state of the browser history.

All we need to do is to call the useHistory hook inside a functional component:

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

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

  const redirect = () => {
    history.push('/login');
  }

  return (
    <div>
      <h1>Hi there!</h1>
      <button onClick={redirect}>Log in</button>
    </div>
  );
};

We can use this object to redirect the user to another page by calling history.push('/example-route').

---

#react #javascript #web-development #programming #developer