How pass value in URL and How get value from URl in React JS

Question

How to Pass value in URL in react js and How to Get Value from URL in React js step 1. Write a code in Link/Button

<Link to={{pathname:`/MediaLandingPage/${props.data.id}`}}>{props.linkName}</Link>

Step 2. Set in Router path

<Route path="/MediaLandingPage/:id" component={MediaLandingPage} />

Step 3. Create Page MediaLandingPage

const MediaLandingPage =(props)=>{
    const id =props.match.params.id
    var ImageData = require('../../Media/image.js')
    var data = ImageData.default
    console.log("Media :",data)
    if(data[id].id==id){
        return<div className=""> 
                    <div><Image src={data[id].imageSrc} className="img-fluid"/></div>
                    <div>{data[id].title}</div>
                    <div>{data[id].description}</div>

                </div>
    }else
    {
        return<div>Sorry</div>
    }
}
export default MediaLandingPage

step 4. Data image.js File

import safeCitizens from "../../assets/images/safeCitizens.png" 
export default[
    {
        id:0,
        imageSrc:safeCitizens,
        title:"name",
        shortDescription:"asfddasf",
        description:"chandra veer singh rathorchandra veer singh rathor"
    },
    {
        id:1,
        imageSrc:safeCitizens,
        title:"name",
        shortDescription:"asfddasf",
        description:"chandra veer singh rathorchandra veer singh rathor"
    },
    {
        id:2,
        imageSrc:safeCitizens,
        title:"name",
        shortDescription:"asfddasf",
        description:"chandra veer singh rathorchandra veer singh rathor"
    } 
]

Welcome to Stack Overflow! This question looks more like a guide/tutorial than a question. If you have a question, please edit your post with some more information. If not, please note that SO is a Q/A site, not a traditional wiki. — Lex Webb
– Lex Webb, Commented Jan 20, 2020 at 11:56
what do you use for route, react-router or react-router-dom? and which version do you use? — Jorge
– Jorge, Commented Jan 20, 2020 at 12:46

Prakash Karena · Accepted Answer · 2020-01-20 12:04:32Z

0

Solution 1 :

Step 1 : Pass your id here directly to route

<Link to={`/MediaLandingPage/${props.data.id}`}>{props.linkName}</Link>

Step 2 : access your data using

this.props.match.params.id

Solution 2 : You can refer my answer

 you can directly pass your id with link

answered Jan 20, 2020 at 12:04

Prakash Karena

2,6031 gold badge9 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How pass value in URL and How get value from URl in React JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related