詳解關(guān)于React-Router4.0跳轉(zhuǎn)不置頂解決方案
更新時(shí)間：2019年05月10日 11:02:54 作者：BlazeXue
這篇文章主要介紹了詳解關(guān)于React-Router4.0跳轉(zhuǎn)不置頂解決案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在使用react-router時(shí)會(huì)遇到奇怪的問(wèn)題，比如當(dāng)我們從首頁(yè)進(jìn)入詳情頁(yè)的時(shí)候，首頁(yè)跳轉(zhuǎn)到詳情頁(yè)，首頁(yè)滾動(dòng)的位置，進(jìn)入到詳情頁(yè)的時(shí)候也會(huì)被記錄下來(lái)，原因是由于共享了同一個(gè)history，所以對(duì)記錄有所保留，這顯然不符合我們的瀏覽習(xí)慣。
總結(jié)種解決方案：
方案一
<Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}>
<Route path="/" component={ App }>
</Router>
方案二
class Protol extends React.Component {
constructor(props) {
super(props);
}
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}
render() {
return (
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
);
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于React中setState同步或異步問(wèn)題的理解
相信很多小伙伴們都一直在疑惑，setState 到底是同步還是異步。本文就詳細(xì)的介紹一下React中setState同步或異步問(wèn)題，感興趣的可以了解一下2021-11-11
詳解React中錯(cuò)誤邊界的原理實(shí)現(xiàn)與應(yīng)用
在React中,錯(cuò)誤邊界是一種特殊的組件,用于捕獲其子組件樹(shù)中發(fā)生的JavaScript錯(cuò)誤,并防止這些錯(cuò)誤冒泡至更高層,導(dǎo)致整個(gè)應(yīng)用崩潰,下面我們就來(lái)看看它的具體應(yīng)用吧2024-03-03
今天介紹下React手寫(xiě)tab切換問(wèn)題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-11-11
在這篇指南中,我們將探索使用 Google Fonts 在 React Native 應(yīng)用中添加自定義字體的方法,字體是優(yōu)秀用戶體驗(yàn)的基石,使用定制字體可以為你的應(yīng)用程序提供獨(dú)特的身份,需要的朋友可以參考下2024-02-02
詳解React如何實(shí)現(xiàn)代碼分割Code Splitting
這篇文章主要為大家介紹了React如何實(shí)現(xiàn)代碼分割Code Splitting示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了React與Redux之?dāng)?shù)組處理講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
React競(jìng)態(tài)條件Race Condition實(shí)例詳解
這篇文章主要為大家介紹了React競(jìng)態(tài)條件Race Condition實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了在?React?中使用?i18next,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
React報(bào)錯(cuò)解決之ref返回undefined或null
最近使用react做個(gè)滾動(dòng)監(jiān)聽(tīng)獲取更多數(shù)據(jù)效果,當(dāng)想獲取dom時(shí)發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報(bào)錯(cuò)解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下2022-08-08
React中setState同步異步場(chǎng)景的使用
本文主要介紹了React中setState同步異步場(chǎng)景的使用，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03