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

Question

所以我收到一条错误消息 - 未捕获类型错误：无法读取未定义的属性（读取 '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 中获取产品 ID

Answer 1

这里没有反应专家，但我认为你需要在导出组件时使用 withRoute，像这样

export default withRouter(AddOrUpdateProduct);

Answer 2

问题

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

解决方案

创建自定义 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));

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

Can't get parameters from url with Redux ownProps

reactjs

react-redux

react-router

所以我收到一条错误消息 - 未捕获类型错误：无法读取未定义的属性（读取 'params'）

问题

解决方案