Динамический React Router с вкладками

Question

У меня есть страница с таблицей, где вы нажимаете на <tr>, и пользователь перенаправляется на другую страницу, например:

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

На новой странице, называемой пользователями, есть двавкладки, которые также перенаправляют на другие страницы:

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

Итак, мне нужно передать идентификатор с родительской страницы на [info page / tab 2] и перенаправить с [info page / tab 2] на [users/ tab 1] по желанию с идентификатором от родителя, что-то вроде этого:

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

Как мне достичь этого результата?Спасибо!:)

Answer 1

Если вы определяете свои маршруты как

/users/:userId
/info/:userId

Вы можете прочитать userID из параметров и использовать его для навигации по страницам

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