使用react-router-dom进行导航

Question

在react-router-dom中，可以选择在网址中的网页之间发送数据 例如myBurger/?bacon=2&salad=3

我的问题是，是否有一个服务可以从一个对象制作（培根，沙拉）数据字符串... 例如

var ingredients = {
  salad: 3,
  bacon: 2
}

myCustomServiceConverter.FromObjectToString(ingredients);
// return ?bacon=2&salad=3

在下一页中将是解码它的功能

var URL = http://localhost:3000/myBurger/?bacon=2&salad=3
myCustomServiceConverter.FromStringToObject(URL);
// return { salad: 3, bacon: 2 }

请不要建议那些link

Answer 1

是的，您可以使用名为qs

的库来完成此操作

你可以在这里找到文件

https://www.npmjs.com/package/qs

let url = qs.stringify({salad: 3,
  bacon: 2
})

然后取回对象

使用另一个名为query-string的库

https://www.npmjs.com/package/query-string

 let url = this.props.history.location.state.query;
 let object = queryString.parse(url, {arrayFormat: 'index'})

Answer 2

我为这种操作构建了一个小插件，也许你可以尝试一下here。