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:

• Redux

• React context

---

3. Using React Router's Link

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 (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

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();
console.log(location);
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

---

My other digital presence:

• Mail: akj0712@duck.com

• GitHub: akj0712

• LinkedIn: akj0712

• Telegram: akj0712

---

More Content at akj07.hashnode.dev

---

Your feedbacks are more than welcome