Question

我有一个URL，如下所示，带有各种查询字符串值。

http://localhost:3000/product/?id=123&name=test

我正在研究使用redux的同构应用程序，做出反应。所以我正在触发动作，我可能知道如何将这些查询字符串值提供给redux动作文件？

export function getProductData(params) {

  debug('Action Requested:' + params);  

  return {
    type:    GET_PRODUCT_DATA,
    promise: request.get(API_URL + params.productId)
  }
};

因为在操作中我正在触发API调用，并且我需要来自查询字符串值的ID。

Answer 1

如果您使用的是React-router，请继续通过props.location.query

访问它们

最终看起来像是：

const Product = (props) =>
  <div>
     <button onClick={e => props.getProductData(props.location.query)}>Do Some Action</button>
  </div>;

Answer 2

根据您的路线，URL中的参数将使用props.params传播到组件所以，如果你有像

这样的路线

<Route path="/product/:productid" component={Product} />

您可以使用道具从Product组件访问productid并将其传递给您的操作：

const Product = (props) =>
  <div>
     <button onClick={e => props.getProductData(props.params)}>Do Some Action</button>
  </div>;

其中props.params包含您在路径中定义的所有参数。在我们的案例中，productid的值将在props.params.productid。

如何使用Redux访问react路由器中的URL查询字符串值

2 个答案: