谁能帮我把这个转换成react-router v6的编写方法?

Question

const DishWithId = ({match}) => {
return(
<DishDetail dish={this.state.dishes.filter((dish) => dish.id === parseInt(match.params.dishId,10))[0]} 
comments={this.state.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId,10))} />
);
};

. . .
<Route path='/menu/:dishId' component={DishWithId} />

我试图将react-router v5转换为react-router v6，我在这部分卡住了，我试图通过从react-router -dom导入useParams，但它不工作

const DishWithId = ({match}) => {
let params =useParams()
return(
<DishDetail dish={DISHES.filter((dish) =>  dish.id ===  parseInt(params.dishId,10))[0]} 
comments={COMMENTS.filter((comment) =>  comment.dishId ===  parseInt(params.dishId,10) )} />

);
}

Answer 1

我也有类似的问题，但这就是我如何解决我的。

* 1。首先从react-router-dom导入useParams。

* 2。按如下所示替换函数:

const DishWithId = () =>｛const {dishId} = useParams();回报(& lt; DishDetails菜= {this.state.dishes.filter ((菜)=比;菜。id === parseInt(disid, 10)) [0]｝评论= {this.state.comments.filter ((评论)=比;发表评论。dishId === parseInt(dishId, 10))}/比;

);