Dynamic React Router with Tabs

Question

I have a page with a table, where you click on a <tr> and the user is redirected to another page, like this:

// parent component
<tr onClick={() => this.props.history.push(`users/${id}`)}>

At the new page called users, there are two tabs which also redirect to other pages:

// users page receives the id from the parent 
// component with this.props.history.push()
<Tab label='Users' key='users'>
    <div>users page content</div>
</Tab>

// This page must also receive the id from parent component. 
// The structure is similar to users page.
<Tab label='Info' key='info'>
    <Redirect to={'/info/:id'} />
</Tab>

So, I need to pass the id from the parent page to [info page/tab 2] and redirect from [info page/tab 2] to [users/tab 1] at will with the id from parent, something like this:

[tab 1]: users/12345
[tab 2]: info/12345

How can I achieve this result? Thank you! :)

Shubham Khatri · Accepted Answer · 2019-02-22 18:01:25Z

1

If you define your Routes like

/users/:userId
/info/:userId

You can read the userID from params and use that to navigate between pages

<Tab label='Info' key='info'>
    <Redirect to={`/info/${this.match.params.userId}`} />
</Tab>

answered Feb 22, 2019 at 18:01

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

10 Comments

RCohen Over a year ago

I tried something like that, but the url appears something like this idk why: info/:id12345. And then when I go from [info tab] to [users tab], the url looks like this users/:id:id12345

Shubham Khatri Over a year ago

You might be writing <Redirect to={'/info/:id'} /> wherein you need to write <Redirect to={`/info/${this.match.params.id}`} />

RCohen Over a year ago

It's like this now: <Redirect to={${routes.INFO}${this.props.match.params.id}} />, where routes.INFO is /info/:id

RCohen Over a year ago

If I remove the :id from /info/, the url looks /info/12345, but I can't see the content of Info page.

RCohen Over a year ago

export const USERS = '/users/:id' export const INFO = '/info/' export const PARENT = '/parent'

|

Collectives™ on Stack Overflow

Dynamic React Router with Tabs

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related