# How to pass additional data while redirecting to a different route in React

In this article, we will see how we can pass extra data while redirecting to a different route in React that uses `react-router-dom` library.

So let’s get started.

## Using Link

Normally we use the `Link` component from `react-router-dom` as shown below:


```js
<Link to="/register">Register</Link>
```


So when we click on the `Register` link, it will redirect to the `/register` route. But `Link` also allows us to pass additional data while redirecting.


```js
<Link to={{ 
 pathname: "/register", 
 state: data_you_need_to_pass 
}}>
 Register
</Link>
```


Here, at the place of `data_you_need_to_pass`, we can pass a `string` or `object`, `array` and so on and in the `/register` route we will get that data in `props.location.state`.

_Instead of naming the variable as state, we can use any name but it’s generally called state._

%[https://codesandbox.io/s/pass-data-routing-link-2241j]

----

## Using history.push

Normally, to redirect using the `push` method, we use it like this:


```js
props.history.push('/register');
```


If you need to do some processing before sending the data like removing some values or to trim the values or make some API call, we can call a handler on the submit button click and pass data as shown below:


```js
props.history.push({ 
 pathname: '/register',
 state: data_you_need_to_pass
});
```

%[https://codesandbox.io/s/pass-data-routing-u7foz]

That’s it for today. I hope you learned something new.

I hope you've been enjoying my articles and tutorials I've been writing. If you found them useful, consider buying me a coffee! I would really appreciate it.

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)

**Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox [here](https://yogeshchavan.dev/).**