How to pass params from Route (react-router-dom) to render function

Question

Is possible to do something like this:

<Route exact path="/activate/:token" render={this.activateAccount} />

then in same component

activateAccount(token) {
    console.log(token);
    return null;
}

How to pass token?

Is my logic correct? Learning MERN a bit, what I find confusing right now is how to move between backend and frontend, for example here when I generate activate account URL I have something like

http://localhost:5006/api/activate/8d7f5b25befb70045b5cb36893fa0f7688b85504

Now my NodeJS/Express is running on 5006 port and my ReactJS is on 3006, not sure what is logic here, I can finish everything on my NodeJS side in this case but not sure how to redirect later on to /login/ on frontend.

Thanks!

Estus Flask · Accepted Answer · 2018-10-04 19:41:35Z

1

The parameter of activateAccount won't be token:

<Route exact path="/activate/:token" render={this.activateAccount} />

As the reference states, Route render function receives route props:

All three render methods will be passed the same three route props

match

location

history

Otherwise it wouldn't be impossible to make use of them in route component.

It is:

activateAccount(props) {
    console.log(props.match.token);
    return null;
}

answered Oct 4, 2018 at 19:41

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

1 Comment

Nemanja Srećković Over a year ago

Thanks for point in right direction! This worked just fine, activateAccount({ match }) { console.log(match.params.token); return null;}

Collectives™ on Stack Overflow

How to pass params from Route (react-router-dom) to render function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related