带标签的动态反应路由器

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! :)

Answer 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>