Reactjs 如何在反应路线中传递多个功能组件？

我有这样的东西

<Switch>
 <Route path="/playground/:id">
      <Header></Header>
      <Playground></Playground>
      <Footer></Footer>
 </Route>
<Switch/>

<Route path="/playground/:id" component={Playground}></Route>

我想通过组件道具传递所有功能组件，如下所示

<Switch>
 <Route path="/playground/:id">
      <Header></Header>
      <Playground></Playground>
      <Footer></Footer>
 </Route>
<Switch/>

<Route path="/playground/:id" component={Playground}></Route>

但在这里，我只能通过组件道具传递一个组件。我怎么能全部通过呢

我想这样做是因为当通过组件道具传递函数组件时，我可以得到

match.params.id

值，但是当我通过第一种方式传递函数组件时，我不能得到

match.params.id

的值，只给出了错误`参数未定义

那么，第一个问题是，如何传递多个组件？

---

第二个问题，为什么我不能访问from match.params.id的值？如果我使用第一种方法传递组件，我如何访问？

1。您可以将所有元素填充到一个组件中，并将其传输到路由器

2.要从参数中获取某种值，其中一种方法是使用react路由器dom，可以通过useParams钩子这样获取，如下所述

const { id } = useParams()
console.log(id)
or
const query = useParams()
console.log(query.id)

---

在其他组件而不是主组件中获取id值怎么样？是的，您也可以从任何地方通过钩子获取id值。我更正了答案您可能想/需要使用。