鍍金池/ 問(wèn)答/HTML/ react-router傳參帶有特殊字符的問(wèn)題

react-router傳參帶有特殊字符的問(wèn)題

當(dāng)傳遞的參數(shù)包含？(問(wèn)號(hào))時(shí)，使用this.props.match.params獲得的值不是想要的，因?yàn)榇藭r(shí)？(問(wèn)號(hào))被當(dāng)做是查詢字符串(querystring)了，怎樣處理這種情況啊？

例如/:id  傳遞的id實(shí)際值為"12?34",此時(shí)this.props.match.params.id的值為12，而不是"12?34"
回答
編輯回答
蔚藍(lán)色

encodeURIComponent
然后去decodeURIComponent

2017年2月16日 02:39
編輯回答
笑浮塵

你可以嘗試一下非常簡(jiǎn)短又好用的庫(kù)：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'
2018年6月6日 12:24