CODEWITHSUNDEEP
reactjs
Ishara Malaviarachchi
Ishara Malaviarachchi

Reputation: 401

passing multiple data on a link click in reactjs

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?

Upvotes: 1

Views: 2737

Answers (3)

Yahya Rehman
Yahya Rehman

Reputation: 331

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

Upvotes: 0

Ishara Malaviarachchi
Ishara Malaviarachchi

Reputation: 401

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>

Upvotes: 2

Inderjeet Singh
Inderjeet Singh

Reputation: 566

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

Upvotes: 1

Related Questions