How to manually invoke Link in React-router?

React-router is a popular library for handling routing in React applications. It provides a Link component that allows you to navigate between different routes. However, there may be situations where you need to manually invoke a Link programmatically, such as when you want to trigger a navigation based on a certain event or condition. In this blog post, we will explore different solutions to manually invoke a Link in React-router.

Solution 1: Using the useHistory hook

React-router provides a useHistory hook that gives you access to the history object. The history object has a push method that allows you to navigate to a different route programmatically. To manually invoke a Link, you can use the push method with the desired route path as the argument.


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

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

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

  return (
    
  );
};

export default MyComponent;

Solution 2: Using the withRouter higher-order component

If you are using a class component or if you prefer not to use hooks, you can use the withRouter higher-order component provided by React-router. The withRouter HOC injects the history object as a prop to your component, allowing you to manually invoke a Link.


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

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

  render() {
    return (
      
    );
  }
}

export default withRouter(MyComponent);

Solution 3: Using the Link component with a ref

Another way to manually invoke a Link is by using a ref. You can create a ref using the useRef hook or the React.createRef method, and then access the current property of the ref to trigger the navigation programmatically.


import React, { useRef } from 'react';
import { Link } from 'react-router-dom';

const MyComponent = () => {
  const linkRef = useRef();

  const handleClick = () => {
    linkRef.current.click();
  };

  return (
    
      Go to My Route
      
    
  );
};

export default MyComponent;

These are three different solutions to manually invoke a Link in React-router. Choose the one that best suits your needs and implement it in your project. Happy coding!

How to manually invoke Link in React-router?