React·前端URL參數丟失符號的解決辦法

起因：跳轉詳情頁時后端同學需要當前內容的id與name等等參數，而name有可能很長並且有特殊符號

因此，跳轉時直接帶到query里，拿的時候會丟失：

這里是直接把id與name給后端后，后端直接拿來配置的默認名稱，可以發現已經丟失了+這個符號

 

 

解決辦法：js的encodeURIComponent()方法

使用示例：

const myQuery =`${values.groupBy === 'ad' ? `&adId=${record.adId}&adName=${encodeURIComponent(record.adName)}`: ''} `
                return (
                <BasisAction code={authCode.AggReportDetail} key={authCode.AggReportDetail}>
                  <Link
                    target = "_blank"
                    to={`/aggReport/aggBaseDetail?${myQuery}`}
                  >明細</Link>
                </BasisAction>

　　

跳轉到新的頁面之后this.props.location.query拿到的值就不會丟失了，因為encodeURIComponent方法把要編碼的字符串中的某些字符給轉義替換了。【它會轉義A-Z a-z 0-9 - _ . ! ~ * ' ( )之外的字符】

 

接口參數也完全匹配： 

 

 與之差不多的還有encodeURL()方法，它不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ) ，目的是對 URI 進行完整的編碼，因此對這些在 URI 中具有特殊含義的 ASCII 標點符號，encodeURI() 函數是不會進行轉義的：;/?:@&=+$,#。進行url跳轉時可以整體使用encodeURI。

而傳遞參數時則可以使用encodeURIComponent，這樣拼接的url才不會被#等特殊字符截斷。

 

還有對應的解碼方法：decodeURI()和decodeURIComponent()。

 

需要注意的是：他們接受的參數全部是字符串，不能是其他格式。

 

 

 

附上MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent