Abhinav Jha
Abhinav's Blog


Abhinav's Blog


Passing Data with React Router using Link

Abhinav Jha's photo
Abhinav Jha
·Nov 14, 2022·

3 min read

Passing Data with React Router using Link
Play this article

Table of contents

  • 1. Passing props
  • 2. Global State
  • 3. Using React Router's Link
  • Let's Begin
  • Show your support by buying me a coffee
  • My other digital presence:

Hey, my name is Abhinav Jha. In this react post, I’m telling you How to pass a parameter, state, props, and value in the react-router-dom Link Component.

If you've used React Router on many projects, definitely you've asked How I can pass some data or state to other components through a link tag?

So 1st of all we'll discuss how we can pass data between components in React.

1. Passing props

The First one is bypassing some props from the parent component to the children's components

const Parent = () => {
  return (
      <Child name="Abhinav" />
const Child = (props) => {
  return (
      <h3>Hello, My name is {props.name}</h3>

2. Global State

The second is by making a Global State and making some data accessible by many components.

You can manage Global State using two main paths:

The third one is basically when you click on a link (to a component), you pass data with that.

Below we Have a simple React App with some basic routes

function App() {
  return (
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />

export default App;

We Have two routes Here the "/"(Home) Route and the "/about"(About) route.

So the First page we'll see if we run yarn start is the Home Page, and if we go to the localhost:{port}/about we'll see the About Page.

Let's Begin

Let's start by passing parameters in the react-router-dom Link Component with two basic steps.

  • Step:1 Declare

Declare means how to write code and pass parameters, states, props, and values.

when Creating a link component to react, inside to=”/about” we pass an object. In this object, we pass some properties.

  • pathname: A string representing the path to the link.

  • search: A string representation of query parameters.

  • hash: A hash to put in the URL, e.g. #a-hash.

  • state/any name: Inside State to value.

<Link to="/watch" state={{ movie: movie }}>

In this case, I passed the state, But you pass any value.

  • Step:2 Access

Access means how to access Link Component State we Declare previously.

We use a react-router-dom hook to access the state. In the first step, we import the useLocation Hook. The inside hook shows all properties. After accessing all properties with the object.

Check out with console.log()


const location = useLocation();
const movie = location.state.movie;

using the above snippets you can access all the fields of the movie, such as {movie._id}, {movie.title} etc...

Thank you for reading🤗 If you have come this far, don't forget to follow & **react **to this blog.

If you ❤ My Content! Connect with me on Twitter (@akj0712)

Show your support by buying me a coffee

Buy Me A Coffee

My other digital presence:

More Content at akj07.hashnode.dev

Your feedbacks are more than welcome

Did you find this article valuable?

Support Abhinav Jha by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
Share this