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