React router v6 问题：如何在 element={ } 中使用 match.params 因为它替换了 component={} 如何在元素中传递 match.params
React router v6 issue: how can I use match.params in element={ } as it replaced component={} How to pass match.params in the element
<路由路径='/menu/starters/:id'
element={ dish.id === parseInt(match.params.id))[0]} /> }
/>
由于您是基于路由匹配参数“注入”item prop，因此我建议创建一个包装器组件以从当前路由读取并注入 prop。
const DetailedCardWrapper = () => {
const { id } = useParams();
const item = this.state.starters.find((dish) => dish.id === Number(id));
return <DetailedCard item={item} />;
};
<Route path='/menu/starters/:id' element={<DetailedCardWrapper />} />
<路由路径='/menu/starters/:id'
element={
由于您是基于路由匹配参数“注入”item prop，因此我建议创建一个包装器组件以从当前路由读取并注入 prop。
const DetailedCardWrapper = () => {
const { id } = useParams();
const item = this.state.starters.find((dish) => dish.id === Number(id));
return <DetailedCard item={item} />;
};
<Route path='/menu/starters/:id' element={<DetailedCardWrapper />} />