How to do a redirect to another route with react-router?

React Router is a powerful routing library for React applications that allows you to handle navigation and routing in a declarative way. One common task you may encounter while using React Router is redirecting to another route programmatically. In this blog post, we will explore different ways to achieve this using react-router.

Method 1: Using the useHistory hook

The useHistory hook is provided by React Router and allows you to access the history object. With the history object, you can navigate to different routes, including redirecting to another route.

Here’s an example of how you can use the useHistory hook to redirect to another route:

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

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

  const handleRedirect = () => {
    history.push('/another-route');
  };

  return (
    Redirect
  );
};

export default MyComponent;

Method 2: Using the Redirect component

The Redirect component provided by React Router allows you to render a redirect to another route. You can use this component in your render method or JSX to achieve a redirect.

Here’s an example of how you can use the Redirect component to redirect to another route:

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

const MyComponent = () => {
  const shouldRedirect = true;

  return (
    {shouldRedirect && }
    
My Component
  );
};

export default MyComponent;

These are two common methods to redirect to another route using React Router. Choose the method that suits your needs and implement it in your React application.

Happy coding!