Programmatically Navigate Using React Router

React Router is a powerful library that allows you to handle routing in your React applications. It provides a way to navigate between different components based on the current URL. In this blog post, we will explore how to programmatically navigate using React Router.
There are several scenarios where you might want to programmatically navigate in your application. For example, after a successful form submission, you might want to redirect the user to a different page. Or, you might want to navigate to a specific route based on certain conditions.
React Router provides a couple of different methods to achieve programmatically navigation:

Using the useHistory hook
Using the withRouter higher-order component

Using the useHistory hook

The useHistory hook is provided by React Router and allows you to access the history object. The history object contains methods for programmatically navigating in your application.
Here’s an example of how you can use the useHistory hook to navigate to a different route:


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

        function MyComponent() {
            const history = useHistory();
        
            const handleClick = () => {
                history.push('/new-route');
            }
        
            return (
                
            );
        }`}

In the above example, we import the useHistory hook from ‘react-router-dom’ and then use it inside our component. We define a handleClick function that calls the history.push method with the desired route as an argument. When the button is clicked, it will navigate to the ‘/new-route’.

Using the withRouter higher-order component

If you are using a class component or if you prefer to use higher-order components, you can use the withRouter higher-order component provided by React Router.
Here’s an example of how you can use the withRouter higher-order component to navigate to a different route:


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

        class MyComponent extends React.Component {
            handleClick = () => {
                this.props.history.push('/new-route');
            }
        
            render() {
                return (
                    
                );
            }
        }
        
        export default withRouter(MyComponent);`}

In the above example, we import the withRouter higher-order component from ‘react-router-dom’ and wrap our component with it. This injects the history object as a prop into our component, which we can then use to navigate to a different route using the history.push method.
These are the two main approaches for programmatically navigating using React Router. Depending on your preference and the structure of your application, you can choose the one that suits your needs best.

Programmatically Navigate Using React Router