帶標簽的動態反應路由器

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>