How to Pass Params with History.push/link/redirect in React-router V4?

How to pass params with history.push/Link/Redirect in react-router v4?

If you are using React with react-router v4, you might have come across the need to pass parameters while navigating between routes. In this blog post, we will explore different ways to pass params using history.push, Link, and Redirect in react-router v4.

1. Using history.push

One way to pass params is by using the history.push method. This method allows you to navigate to a new route and pass params along with it. Here’s an example:


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

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

  const handleClick = () => {
    history.push('/my-route', { param1: 'value1', param2: 'value2' });
  };

  return (
    
  );
};

2. Using Link

The Link component provided by react-router-dom is another way to pass params while navigating between routes. Here’s an example:


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

const MyComponent = () => {
  return (
    
      Go to My Route
    
  );
};

3. Using Redirect

If you want to redirect to a new route and pass params, you can use the Redirect component from react-router-dom. Here’s an example:


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

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

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

These are the three main ways to pass params with history.push, Link, and Redirect in react-router v4. Choose the method that best suits your use case and start passing params between routes in your React application!

How to Pass Params with History.push/link/redirect in React-router V4?