How to Push to History in React Router V4?

React Router is a popular library for handling routing in React applications. With the release of React Router version 4, there have been some changes in how to push to history. In this blog post, we will explore different solutions to the problem of pushing to history in React Router v4.

Solution 1: Using the useHistory hook

React Router v5 introduced a new hook called useHistory, which allows us to access the history object. We can use this hook to push a new entry into the history stack.

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

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

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

  return (
    Push to History
  );
};

export default MyComponent;

Solution 2: Using the withRouter higher-order component

If you are not using hooks or if you are working with a class component, you can use the withRouter higher-order component provided by React Router. This HOC injects the history object as a prop into the component.

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

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

  render() {
    return (
      Push to History
    );
  }
}

export default withRouter(MyComponent);

These are the two main solutions for pushing to history in React Router v4. Depending on your use case and preference, you can choose either solution. Both solutions achieve the same result of pushing a new entry into the history stack.

Remember to import the necessary dependencies and wrap your component with the appropriate higher-order component or hook, depending on the solution you choose.

That’s it! You now know how to push to history in React Router v4. Happy coding!