React Router v6 和自己的参数不像 v5 那样工作

Question

你好，在 React 路由器 dom v5 中，我可以在 redux 中获取参数。示例代码如下：

1-传递参数

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

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

中获取 productId

function mapStateToProps(state, ownProps) {...

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

Answer 1

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

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

第二，

react-router-dom v6 Route components rendered via the element prop don't receive route props

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

const { productId } = useParams();

Answer 2

我是 React 的新手，我花了一天时间。但最后我找到了解决方案。我不确定这是最佳做法，但现在对我来说很有意义。检查 link 解决方案。

React Router v6 and ownParams doesnt work like v5