React Router v6 和 ow Params 不像 v5 那样工作答案

【问题标题】：React Router v6 and ownParams doesnt work like v5React Router v6 和 ow Params 不像 v5 那样工作
【发布时间】：2022-01-20 21:39:51
【问题描述】：

您好，在 react router dom v5 中，我可以在 redux 中获取参数。示例代码如下：

1-传递参数

<Route path="/saveproduct/:productId" component={AddOrUpdateProduct} />

2- 在 redux 中获取参数。我可以在 ownProps 中获取 productId

function mapStateToProps(state, ownProps) {...

但是当我在 v6 中调用路由时，我无法在 ownProps 中获取 productId

【问题讨论】：

【解决方案1】：

首先，在 react-router-dom v6 中，您应该像元素一样将组件传递给 Route。见docs。

<Route path="/saveproduct/:productId" element={ <AddOrUpdateProduct /> } />

第二，

react-router-dom v6 通过 element 属性渲染的路由组件不接收路由属性

见question。这里不需要 Redux。只需使用参数反应钩子

const { productId } = useParams();

【讨论】：

【解决方案2】：

我是 react 新手，我需要一天时间。但最后我找到了解决方案。我不确定这是最佳做法，但现在对我来说很有意义。检查链接以获取解决方案。

【讨论】：