get parameter value from url using React Router

Question

I want to get the id value from this React Router:

<BrowserRouter basename="/api">
    <Switch>
        <Route path="/pm" exact component={PaymentMethod}/>
        <Route path="/pw" exact component={PaymentWeb}/>
        <Route path="/rg" exact component={Registrasi}/>
        <Route path="/bonus/:id" exact component={BonusScreen}/>
        <Route path="/hb" exact component={HistoryBonus}/>
    </Switch>
</BrowserRouter>

in my BonusScreen I tried to print the value by using this :

const userId = this.props.match.id;
console.log(this.userId);

from the browser I try to access the URL like this:

bonus/NGO628567652201

But it always returned undefined.
How can I fix this ?

You tagged this api but that says "DO NOT USE: Tag with the library you mean, [api-design], or something else appropriate instead.". You should fix that. — Quentin
– Quentin, Commented Apr 5, 2018 at 9:42

Alcides Bezerra · Accepted Answer · 2020-05-28 18:53:32Z

21

In case of anyone having this problem. The correct would be:

const userId = this.props.match.params.id;

05/2020 UPDATE USING REACT ROUTER V4 AND HOOKS

import { useParams } from 'react-router-dom';

//Then inside your component
const { id } = useParams();

edited May 28, 2020 at 18:53

answered Jan 8, 2019 at 16:16

Alcides Bezerra

4354 silver badges13 bronze badges

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

Comments

Shan · Accepted Answer · 2019-09-27 12:12:35Z

1

You can try this

const id = this.props.computedMatch.params.id

answered Sep 27, 2019 at 12:12

Shan

6199 silver badges21 bronze badges

Collectives™ on Stack Overflow

get parameter value from url using React Router

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related