React:默认情况下，useQueries不对嵌套查询对象进行字符串化:使用自定义的stringifyQuery函数

Question

我正在尝试构建一个URL作为React NavLink (从react-router-tutorial中借用的组件)的目标，但是我正在为向" to“接口属性添加查询字符串的语法而苦苦挣扎。

render: function(){
      urlParms = {show: "imagename"},

    return <NavLink to={{ pathname: 'image-viewer', query: { urlParms } }} className="nav-link">{this.props.data}</NavLink>

使用上面的代码，查询显示为image-viewer?urlParms%5Bobject+Object%5D，Chrome的开发工具为链接发出上面的错误。

如何编写“自定义stringifyQuery函数”，以及将其部署在哪里？如果我把query: { show: "imagename" }放在上面的位置，它就会工作得很好。

Answer 1

你不需要用大括号括起你的urlParms对象(顺便说一句，你可能应该重命名它，读起来像个拼写错误:)。

现在发生的情况是，传入NavLink的to属性的query对象如下所示：

{ urlParms: { show: "imagename" } }

你需要的只是：

  return <NavLink to={{ pathname: 'image-viewer', query: urlParms }} className="nav-link">{this.props.data}</NavLink>

您可以将其重命名为query并使用ES6速记，因为您似乎可以使用它：

  let query = { show: "imagename" }

  return <NavLink to={{ pathname: 'image-viewer', query }} className="nav-link">{this.props.data}</NavLink>