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

Posted 2023-02-19

【中文标题】React Router v6 和 ow Params 不像 v5 那样工作

【英文标题】：React Router v6 and ownParams doesnt work like 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();

【讨论】：

但是我需要先从 api 获取数据然后返回到页面中？

如果在加载该组件时 Redux 存储中没有必要的数据，则必须从 API 请求。继续使用 Redux 存储 API 数据，但不要存储 URL 参数。

好的，但是我什么时候应该调用 api？使用效果如何？作为回报，我将参数传递给另一个组件。

是的，最好的做法是 useEffect() 没有 deps。 ***.com/questions/53219113/…

【参考方案2】：

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

https://youtu.be/qdCHEUaFhBk 还要感谢@kupp