React passing parameters with URL

Question

Im developing a React application. When the user clicks on the view-button on a list view, I want that to be redirected to the view page with the item_id. I tried to use the hyperlink (< a> tag) tag to do this but it doesnt navigate with item_id of the clicked row. I want to know how to pass parameters with URL in react.

This is the code I tried.

 <a className="btn btn-info btn-xs" href={'/#/fld-view/:id'} title="View"><span className="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>

You'll need to use react router for this: github.com/reactjs/react-router refer tutorial here:github.com/reactjs/react-router-tutorial/tree/master/lessons — Sandesh K
– Sandesh K, Commented Sep 8, 2016 at 4:30

Alexandre Rivest · Accepted Answer · 2016-09-08 04:38:42Z

1

Component Link from react-router would be the solution. Also, to add the props (in your case the id) to a string, you should go this way :

href={`/#/fld-view/${id}`} //ES6 or ES7 if I remember

if you aren't using it :

href={'/#/fld-view/' + id}

answered Sep 8, 2016 at 4:38

Alexandre Rivest

7045 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shashika Virajh Over a year ago

Thanks very much Alexander.

Alexandre Rivest Over a year ago

if you haven't declared you props in the render function (like this: const { id} = this.props; ) you would have to put in the url this.props.id instead of only id. If it works, make sure to set my answer as the good answer ;)

Stephen Rauch · Accepted Answer · 2017-08-06 14:43:21Z

0

Instead of use the <a> tag use the <Link></Link> tags from react-router

<Link to={
      {
        pathname: match.url + '/view',
        search:'? itemview1=' + id_1  
       }
  }>GO TO A VIEW</Link>

edited Aug 6, 2017 at 14:43

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Aug 6, 2017 at 14:23

user8424887

1

Collectives™ on Stack Overflow

React passing parameters with URL

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related