關(guān)于React-Router4.0跳轉(zhuǎn)不置頂解決方案

DC_er 發(fā)布于2019-08-26 13:43 / 2786人閱讀

摘要：在使用時會遇到奇怪的問題，比如當(dāng)我們從首頁進(jìn)入詳情頁的時候，首頁跳轉(zhuǎn)到詳情頁，首頁滾動的位置，進(jìn)入到詳情頁的時候也會被記錄下來，原因是由于共享了同一個，所以對記錄有所保留，這顯然不符合我們的瀏覽習(xí)慣。總結(jié)種解決方案方案一方案二

在使用react-router時會遇到奇怪的問題，比如當(dāng)我們從首頁進(jìn)入詳情頁的時候，首頁跳轉(zhuǎn)到詳情頁，首頁滾動的位置，進(jìn)入到詳情頁的時候也會被記錄下來，原因是由于共享了同一個history，所以對記錄有所保留，這顯然不符合我們的瀏覽習(xí)慣。

總結(jié)種解決方案：

方案一

window.scrollTo(0, 0)} history={hashHistory}>

方案二

class Protol extends React.Component {

constructor(props) {
    super(props);
}
 componentDidUpdate(prevProps) {
     if (this.props.location !== prevProps.location) {
         window.scrollTo(0, 0)
     }
 }
render() {
    return (
        
            

            {this.props.children}
            
        
    );
}

}

云服務(wù)器 GPU云服務(wù)器 asp中跳轉(zhuǎn)不正常解決首頁跳轉(zhuǎn) react-router react-router4

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109383.html

相關(guān)文章

從路由原理出發(fā)，深入閱讀理解react-router 4.0的源碼

摘要：通過前端路由可以實現(xiàn)單頁應(yīng)用本文首先從前端路由的原理出發(fā)，詳細(xì)介紹了前端路由原理的變遷。接著從的源碼出發(fā)，深入理解是如何實現(xiàn)前端路由的。執(zhí)行上述的賦值后，頁面的發(fā)生改變。 ??react-router等前端路由的原理大致相同，可以實現(xiàn)無刷新的條件下切換顯示不同的頁面。路由的本質(zhì)就是頁面的URL發(fā)生改變時，頁面的顯示結(jié)果可以根據(jù)URL的變化而變化，但是頁面不會刷新。通過前端路由可以實現(xiàn)...

Miyang 2019-08-23 12:01 評論0 收藏0
todo-list 項目問題總結(jié)（使用 react 進(jìn)行開發(fā)）

摘要：項目問題總結(jié)這個項目，很簡單，前端使用，后端使用進(jìn)行開發(fā)。方便移動端開發(fā)。當(dāng)動畫結(jié)束后，有一個鉤子函數(shù)可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數(shù)，我就感覺懵逼了。。。 todo-list 項目問題總結(jié) 這個 todo-list 項目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進(jìn)行開發(fā)。數(shù)據(jù)庫使用 Mysql...

shengguo 2019-08-22 15:37 評論0 收藏0
使用react-router4.0實現(xiàn)重定向和404功能

摘要：原文地址在開發(fā)中，重定向和這種需求非常常見，使用可以使用進(jìn)行重定向最常用的就是用戶登錄之后自動跳轉(zhuǎn)主頁。原文地址:https://github.com/huruji/blog/issues/2 在開發(fā)中，重定向和404這種需求非常常見，使用React-router4.0可以使用Redirect進(jìn)行重定向最常用的就是用戶登錄之后自動跳轉(zhuǎn)主頁。 import React, { Compo...

hqman 2019-08-20 18:57 評論0 收藏0
手挽手帶你學(xué)React：三檔 React-router4.x的使用

摘要：我們在內(nèi)部來渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機(jī)制，我們需要把值綁定進(jìn)入內(nèi)部。手挽手帶你學(xué)React入門三檔,帶你學(xué)會使用Reacr-router4.x,開始創(chuàng)建屬于你的React項目什么是React-router React Router 是一個基于 React 之上的強(qiáng)大路由庫，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時保持頁面與 URL 間的同步。通俗一...

SunZhaopeng 2019-08-23 15:11 評論0 收藏0