如何在reactjs中获取查询参数

Question

我正在使用版本

"react": "^0.13.3",
"react-router": "^0.13.3" 

我希望收到导航中的参数

1）正确完成导航

2）当我尝试使用this.props.query.id接收显示undefined的参数时会发生什么。

Answer 1

使用此：

this.props.location.query.id

Answer 2

升级到react-router v4和;

改为使用此：

this.props.location.search

如果您有类似mysite.com/user/tweets?filter=top&origin=im的网址

正在做

console.log(this.props.location.search); //yields "?filter=top&origin=im"

  

因此要获取“过滤器”或“来源”的值，您需要使用   用于解析查询字符串的程序包，因为react-router不存在   具有对查询字符串进行解析的内置支持。例如。使用   您可以在NPM上使用“查询字符串”库：

import queryString from 'query-string';

const UrlQueryStrings = this.props.location.search;
const queryValues = queryString(UrlQueryStrings);

console.log(queryValues.filter); // Gives "top"
console.log(queryValues.origin); // Gives "im"