亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

NextJS - 將查詢參數附加到動態路由

NextJS - 將查詢參數附加到動態路由

人到中年有點甜 2022-07-21 10:12:10
在我的 NextJS 應用程序中,我有一個在每個頁面上都可見的語言選擇器。當我選擇一種新語言時,我只想通過向其附加查詢參數lang=en來替換當前 URL。這是替換 URL 的函數:const changeLanguage = (lang: LanguageID) => {    replace({      pathname,      query: { ...query, lang },    });  };在本例中replace,query和pathname來自下一個路由器?,F在,一切都適用于靜態路由,但我無法讓它適用于動態路由。例如,我有以下文件夾結構:pages|_customers|__index.tsx|__[customerId].tsx如果我打開http://localhost/customers并將我的語言更改為英語,則 URL 將更改為http://localhost/customers?lang=en我想要的。但是,如果我打開http://localhost/customer/1并將語言更改為英語,則 URL 將更改為http://localhost/customers/[customerId]?customerId=1&lang=en,而不是我期望的 URL http://localhost/customers/1?lang=en?,F在,我知道我可以asPath在路由器上使用,并通過附加lang到它來重構查詢字符串對象,但我覺得它應該構建到 Next 中。另外,我知道使用 vanilla JS 可以輕松完成,但這不是重點。我錯過了什么嗎?有沒有更簡單的方法將查詢參數附加到動態路由而不進行服務器端重新渲染?謝謝
查看完整描述

4 回答

?
HUX布斯

TA貢獻1876條經驗 獲得超6個贊

如果我們想把它作為一個鏈接 - 像這樣使用它:


// ...

const { query } = useRouter();

// ...


<Link

    href={{

        pathname: router.pathname,

        query: { ...query, lang },

    }}

    passHref

    shallow

    replace

></Link>


查看完整回答
反對 回復 2022-07-21
?
紅糖糍粑

TA貢獻1815條經驗 獲得超6個贊

不需要發送整個先前路由的解決方案,replace只需替換我們需要替換的內容,因此查詢參數:


const router = useRouter();

router.replace({

   query: { ...router.query, key: value },

});


查看完整回答
反對 回復 2022-07-21
?
富國滬深

TA貢獻1790條經驗 獲得超9個贊

v

如果我們想把它作為一個鏈接 - 像這樣使用它:


// ...

const { query } = useRouter();

// ...


<Link

    href={{

        pathname: router.pathname,

        query: { ...query, lang },

    }}

    passHref

    shallow

    replace

></Link>


查看完整回答
反對 回復 2022-07-21
?
開滿天機

TA貢獻1786條經驗 獲得超13個贊

只需向當前路由器添加更多參數,然后自行推送


const router = useRouter();

router.query.NEWPARAMS = "VALUE"

router.push(router)


查看完整回答
反對 回復 2022-07-21
  • 4 回答
  • 0 關注
  • 234 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號