react-router传参带有特殊字符的问题

Question

当传递的参数包含？(问号)时，使用this.props.match.params获得的值不是想要的，因为此时？(问号)被当做是查询字符串(querystring)了，怎样处理这种情况啊？

例如/:id  传递的id实际值为"12?34",此时this.props.match.params.id的值为12，而不是"12?34"

Answer 1

encodeURIComponent
然后去decodeURIComponent

Answer 2

你可以尝试一下非常简短又好用的库：query-string。

const queryString = require('query-string');
 
console.log(location.search);
//=> '?foo=bar'
 
const parsed = queryString.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}
 
console.log(location.hash);
//=> '#token=bada55cafe'
 
const parsedHash = queryString.parse(location.hash);
console.log(parsedHash);
//=> {token: 'bada55cafe'}
 
parsed.foo = 'unicorn';
parsed.ilike = 'pizza';
 
const stringified = queryString.stringify(parsed);
//=> 'foo=unicorn&ilike=pizza'
 
location.search = stringified;
// note that `location.search` automatically prepends a question mark
console.log(location.search);
//=> '?foo=unicorn&ilike=pizza'