passing multiple data on a link click in reactjs

Question

Question: How can I pass a prop or a single value, like a name, through React-Router's Link component, and catch it at the endpoint?

This is what I mean: Let's say we are on page /a. The Link will take the user to /b. As such . Now, I need to pass the name through the Link, from /a, to /b.

How can I pass multiple data from one component to another through the link in react routing?

Welcome to stack overflow. I think its already been answered here https://stackoverflow.com/questions/45598854/passing-props-through-react-router-v4-link — Inderjeet Singh, Dec 07 '18 at 06:43

score 2 · Accepted Answer · answered Dec 10 '18 at 05:25

If you want to send more than one parameter through a route, you can do it like this.

1.Link element

  <Link to={`/exchangeClicked/${variable1} ,${variable2},${variable3}`} >Click
                    </Link>

2.Configure your route path to accept those parameters

  <Route
          exact
          path="/exchangeClicked/:variable1,:variable2,:variable3"
          component={MyComponent}
   />

3.You can then access the param in the new route via,

<Typography variant="h4" color="inherit">
        Exchange:{this.props.match.params.variable1}
</Typography>


<Typography variant="Body 1" color="inherit">
        Type:{this.props.match.params.variable2}
</Typography>

 <Typography variant="Body 1" color="inherit">
        Durabiliy:{this.props.match.params.variable3}
 </Typography>

score 1 · Answer 2 · answered Dec 07 '18 at 06:46

Passing props

You can pass arbitrary props to a route via the state object:

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

Then you can access the state object from within your component:

const {foo} = props.location.state

console.log(foo) // "bar"

Copied from https://stackoverflow.com/a/45599159/1826429

score 0 · Answer 3 · answered Dec 19 '19 at 11:34

Create a new object and provide the route and the parameters as strings


const newTo = {
      pathname: "/newRoute", 
      param1: `${firstName}`,
      param2: `${lastName}`,
      param3: `${email}`
    };

<Link to={newTo} >

Now on the receiving end of the route

  const fName=this.props.location.param1
  const lName=this.props.location.param2
  const emailID=this.props.location.param3

passing multiple data on a link click in reactjs

3 Answers3