請問React 使用 react-router v6 怎麼取得多個URL Param?

react react-router linepay line javascript

samuraigo 2021-12-16 10:12:48 ‧ 997 瀏覽

分享至

如題，目前在嘗試做LinePay付款機制，LinePay的API在確認付款後會回傳一個網址並導向到我設定的確認付款頁面，後面他API會自己帶上參數transactionId和orderId：
網址如下
https://examplle.ok.com/confirmUrl?transactionId=123456778&orderId=A001122

其中
https://examplle.ok.com/confirmUrl
這是我自己設定付款確認後要導向去的頁面(URL自訂)

看react-router v6的官方文件和網上文章都說要抓URL param我在設定路由時要先指定param，我目前路由設定如下

<Route path='/confirmUrl' element={ <LinePayOk />} />

文件說要設定成下面這樣

<Route path='/confirmUrl/:transactionId' element={ <LinePayOk />} />

有個問題是param是他LINE API自己回傳的，我自己這裡的路由也要加上:transactionId嗎？
如果是的話，要怎麼取兩個param呢？？我寫下面這樣會報錯

<Route path='/confirmUrl/:transactionId&:orderId' element={ <LinePayOk />} />

還請大大們幫小弟解惑，感恩了！

listennn08 iT邦高手 5 級 ‧ 2021-12-16 11:18:49 檢舉

LinePay API 回傳的是 queryString 不是 react 的 param
路由是 /confirmUrl 這樣而已
v6 把 useQuery 拿掉了要改用 useSearchParams
https://reactrouter.com/docs/en/v6/api#usesearchparams