詳解關(guān)于React-Router4.0跳轉(zhuǎn)不置頂解決方案
更新時(shí)間：2019年05月10日 11:02:54 作者：BlazeXue
這篇文章主要介紹了詳解關(guān)于React-Router4.0跳轉(zhuǎn)不置頂解決案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
在使用react-router時(shí)會遇到奇怪的問題，比如當(dāng)我們從首頁進(jìn)入詳情頁的時(shí)候，首頁跳轉(zhuǎn)到詳情頁，首頁滾動的位置，進(jìn)入到詳情頁的時(shí)候也會被記錄下來，原因是由于共享了同一個(gè)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)文章
React循環(huán)遍歷渲染數(shù)組和對象元素方式
這篇文章主要介紹了React循環(huán)遍歷渲染數(shù)組和對象元素方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了React Hooks之useRef獲取元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了React使用公共文件夾public問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
react render的原理及觸發(fā)時(shí)機(jī)說明
這篇文章主要介紹了react render的原理及觸發(fā)時(shí)機(jī)說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，有興趣的可以了解下2017-09-09
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個(gè)特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法2021-12-12
react中使用better-scroll滾動插件的實(shí)現(xiàn)示例
滾動在很多地方都可以使用，本文主要介紹了react中使用better-scroll滾動插件的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了詳解React 16 中的異常處理的相關(guān)資料,React 16.x 版本中，引入了所謂 Error Boundary 的概念，從而保證了發(fā)生在 UI 層的錯(cuò)誤不會連鎖導(dǎo)致整個(gè)應(yīng)用程序崩潰；未被任何異常邊界捕獲的異?？赡軙?dǎo)致整個(gè) React 組件樹被卸載，需要的朋友可以參考下2017-07-07
React如何實(shí)現(xiàn)瀏覽器打印部分內(nèi)容詳析
這篇文章主要給大家介紹了關(guān)于利用React如何實(shí)現(xiàn)瀏覽器打印部分內(nèi)容的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
React是一個(gè)狀態(tài)機(jī)主要體現(xiàn)在state上，通過與用戶交易實(shí)現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來初始化的，本文重點(diǎn)給大家介紹react中的state的簡寫方式，感興趣的朋友一起看看吧2021-08-08