带有选项卡的动态 React 路由器

Question

我有一个带有表格的页面，您在其中单击 <tr> 并将用户重定向到另一个页面，如下所示：

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

在名为 users 的新页面上，有两个选项卡也重定向到其他页面：

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

所以，我需要将父页面的 id 传递给 [info page/tab 2] 并使用父页面的 id 随意从 [info page/tab 2] 重定向到 [users/tab 1]，例如这个：

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

我怎样才能达到这个结果？ 谢谢！ :)

Answer 1

如果你定义你的路线像

/users/:userId
/info/:userId

您可以从参数中读取用户 ID 并使用它在页面之间导航

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