无法使用 Redux ownProps 从 url 获取参数

Question

所以我收到一条错误消息-Uncaught TypeError:无法读取未定义的属性(读取"params"(

AddOrUpdateProduct.js

function mapStateToProps(state, ownProps) {
const productId = ownProps.match.params.productId;
const product =
productId && state.productListReducer.length > 0
? getProductById(state.productListReducer, productId)
: {}
return {
product: product,
products: state.productListReducer,
categories: state.categoryListReducer
}
}

App.js

<Routes>
<Route path="/" exact element={<Dashboard />} />
<Route path="/product" exact element={<Dashboard />} />
<Route path="/saveproduct/:productId" element={<AddOrUpdateProduct />} />
<Route path="/cart" exact element={<CartDetail />} />
</Routes>

我正在尝试使用"ownProps.match.params.productid"在url中获取productid

Answer 1

问题

在react-router-dom@6中，不再有路由道具。如果您需要访问productId路由参数，则需要创建一个更高阶组件来访问路由道具，并将它们作为道具注入到类组件中。

解决方案

创建自定义withRouter组件：

import { useParams } from 'react-router-dom';
const withRouter = Component => props => {
const params = useParams();
return <Component {...props} params={params} />;
}

包裹并装饰AddOrUpdateProduct组件，使其将params作为道具注入。

function mapStateToProps(state, ownProps) {
const productId = ownProps.params.productId;
const product =
productId && state.productListReducer.length > 0
? getProductById(state.productListReducer, productId)
: {};
return {
product,
products: state.productListReducer,
categories: state.categoryListReducer
};
}
export default connect(mapStateToProps)(withRouter(AddOrUpdateProduct));

Answer 2

这里没有react专家，但我认为在导出组件时需要使用withRoute，类似于

export default withRouter(AddOrUpdateProduct);