第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

NextJS - 將查詢(xún)參數(shù)附加到動(dòng)態(tài)路由

NextJS - 將查詢(xún)參數(shù)附加到動(dòng)態(tài)路由

在我的 NextJS 應(yīng)用程序中,我有一個(gè)在每個(gè)頁(yè)面上都可見(jiàn)的語(yǔ)言選擇器。當(dāng)我選擇一種新語(yǔ)言時(shí),我只想通過(guò)向其附加查詢(xún)參數(shù)lang=en來(lái)替換當(dāng)前 URL。這是替換 URL 的函數(shù):const changeLanguage = (lang: LanguageID) => {    replace({      pathname,      query: { ...query, lang },    });  };在本例中replace,query和pathname來(lái)自下一個(gè)路由器。現(xiàn)在,一切都適用于靜態(tài)路由,但我無(wú)法讓它適用于動(dòng)態(tài)路由。例如,我有以下文件夾結(jié)構(gòu):pages|_customers|__index.tsx|__[customerId].tsx如果我打開(kāi)http://localhost/customers并將我的語(yǔ)言更改為英語(yǔ),則 URL 將更改為http://localhost/customers?lang=en我想要的。但是,如果我打開(kāi)http://localhost/customer/1并將語(yǔ)言更改為英語(yǔ),則 URL 將更改為http://localhost/customers/[customerId]?customerId=1&lang=en,而不是我期望的 URL http://localhost/customers/1?lang=en?,F(xiàn)在,我知道我可以asPath在路由器上使用,并通過(guò)附加lang到它來(lái)重構(gòu)查詢(xún)字符串對(duì)象,但我覺(jué)得它應(yīng)該構(gòu)建到 Next 中。另外,我知道使用 vanilla JS 可以輕松完成,但這不是重點(diǎn)。我錯(cuò)過(guò)了什么嗎?有沒(méi)有更簡(jiǎn)單的方法將查詢(xún)參數(shù)附加到動(dòng)態(tài)路由而不進(jìn)行服務(wù)器端重新渲染?謝謝
查看完整描述

4 回答

?
HUX布斯

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個(gè)贊

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


// ...

const { query } = useRouter();

// ...


<Link

    href={{

        pathname: router.pathname,

        query: { ...query, lang },

    }}

    passHref

    shallow

    replace

></Link>


查看完整回答
反對(duì) 回復(fù) 2022-07-21
?
紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

不需要發(fā)送整個(gè)先前路由的解決方案,replace只需替換我們需要替換的內(nèi)容,因此查詢(xún)參數(shù):


const router = useRouter();

router.replace({

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

});


查看完整回答
反對(duì) 回復(fù) 2022-07-21
?
富國(guó)滬深

TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊

v

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


// ...

const { query } = useRouter();

// ...


<Link

    href={{

        pathname: router.pathname,

        query: { ...query, lang },

    }}

    passHref

    shallow

    replace

></Link>


查看完整回答
反對(duì) 回復(fù) 2022-07-21
?
開(kāi)滿(mǎn)天機(jī)

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊

只需向當(dāng)前路由器添加更多參數(shù),然后自行推送


const router = useRouter();

router.query.NEWPARAMS = "VALUE"

router.push(router)


查看完整回答
反對(duì) 回復(fù) 2022-07-21
  • 4 回答
  • 0 關(guān)注
  • 252 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)