带标签的动态反应路由器

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] 并从 [info page/tab 2] 重定向到 [users/tab 1]，使用来自父页面的 id，如下所示：

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

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

Answer 1

如果你定义你的路线

/users/:userId
/info/:userId

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

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