CODEWITHSUNDEEP
reactjs
Woodchuck
Woodchuck

Reputation: 4474

Send parameter value via React routing

I'm trying to use Link from react-router-dom to send a parameter to another page.

I have this path:

<Route path={"/IDSM/IDSMAdmin/EditUser/:username"} component={EditUser}/>

Here's the link that gets there:

<Link to={"/IDSM/IDSMAdmin/EditUser/${item}"}>{item}</Link>

But that doesn't send the value of {item} to the other page. Instead it just sends the literal value "${item}".

{ username: "${{item}}" }

How can I send the contents of {item} itself?

Upvotes: 0

Views: 45

Answers (2)

Sekar
Sekar

Reputation: 109

Use back-tick character instead of double quotes to send the params

<Link to={`/IDSM/IDSMAdmin/EditUser/${item}`}>text here</Link>

Upvotes: 3

user-9725874
user-9725874

Reputation: 871

If you want to pass param to another component:

<Route path={"/IDSM/IDSMAdmin/EditUser/:username"} component={EditUser}/>

export default class EditUser extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.username}</h2>
      </div>
    )
  }
}

Upvotes: 3

Related Questions