Using History with react-router-dom v6

React Router is a popular library for handling routing in React applications. With the release of version 6, there have been some changes to how history is handled. In this blog post, we will explore how to use history with react-router-dom v6 and discuss the different approaches to achieve this.

Approach 1: Using useHistory Hook

The useHistory hook is a convenient way to access the history object in functional components. It allows you to programmatically navigate and manipulate the browser history.

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

    function MyComponent() {
      const history = useHistory();

      const handleClick = () => {
        history.push('/new-route');
      };

      return (
        Go to New Route
      );
    }
  

Approach 2: Using the useNavigate Hook

In react-router-dom v6, the useHistory hook has been replaced with the useNavigate hook. It provides similar functionality to useHistory, allowing you to navigate programmatically.

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

    function MyComponent() {
      const navigate = useNavigate();

      const handleClick = () => {
        navigate('/new-route');
      };

      return (
        Go to New Route
      );
    }
  

Approach 3: Using the withRouter Higher-Order Component (HOC)

If you prefer using class components or need access to the history object in a nested component, you can use the withRouter higher-order component (HOC).

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

    class MyComponent extends React.Component {
      handleClick = () => {
        this.props.history.push('/new-route');
      };

      render() {
        return (
          Go to New Route
        );
      }
    }

    export default withRouter(MyComponent);
  

These are the three main approaches to using history with react-router-dom v6. Choose the one that best suits your needs and enjoy seamless navigation in your React applications.