Reactjs

How to pass state or data in react-router v6

Pass data from one component to another component with react-router (v6) Link Component.

How to pass state or data in react-router v6

The react-router is the best library to handle routing in reactjs. With a react-router, you pass state or data from one component to another component to use the react-router Link component.

Data pass more quickly in the new version of react-router (v6). For example, you can pass an object's data from one component to another.

You can play with code in code sandbox Browser base Ide.

Play with code

How to pass parameters in react-router-dom Link?

Steps

1. Pass Data
2. Access data

Pass Data

1. First step
2. Second step
3. Third step

First Step

The first step import the Link Component in react-router-dom

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