React Router Push Silently

Question

私の場合、いくつかのタブがあります。タブコンテナをスワイプできます。ユーザーがタブを切り替えると、ルートも更新されます。 例：

ユーザーがタブ1にいる場合、ルートは/homeになります。彼がTab 2にスワイプすると、ルートは/home/newsになります。彼がタブ3にスワイプすると、ルートは/home/aboutになります。

私はそれがthis.props.push(NEXTROUTE)で実現できることを知っています。しかし、このようにすると、コンポーネントが再レンダリングされ、前のタブの最後のスクロール位置が失われます。私の場合は、最後にスクロールされたタブの位置を上にスクロールせずに保持する必要があります。

反応ルータの状態silentlyをプッシュすることはできますか？状態をプッシュするときにコンポーネントを再レンダリングして、画面の最後のスクロール位置を維持できるようにする必要はありません。

どのような考えですか？ありがとう。

Answer 1

1つの方法は、ルートを同じコンポーネントを指すように設定し、ルートパラメータを使用して現在選択されているタブを設定することです。第二の方法は、スクロール位置を保存し、それをバックに設定することです

componentWillReceiveProps() { 
    const { route, params } = props; 
    const { path } = route; 
    const selectedTab = path !== '/dashboard' ? 1 : 2; 

    this.setState({selectedTab}) 

    console.log('news item -> ', params.itemId) 
} 

：

<Route path="/dashboard" component={App}/> 
<Route path="/news/:itemId" component={App}/> 

と：あなたはあなたが目指している「サイレント」動作を実現この方法です。

A取り組んJSBin：https://jsbin.com/qiraqa/edit?js,output

関連するコード：

scroll(e) { 

    const { tab, scrollPositions } = this.state; 

    const target = e.target, 
      scrollTop = target.scrollTop; 

    scrollPositions[tab] = scrollTop; 

    this.setState({ 
     scrollPositions 
    }); 

    console.log(scrollTop);  
} 

navigateToTab(tab) { 
     const { scrollPositions = [] } = this.state, 
     scrollPosition = scrollPositions[tab] || 0; 

     this._container.scrollTop = scrollPosition; 

     this.setState({tab});  
} 

と：

<div style={MainStyles.overflow} onScroll={this.scroll.bind(this)} ref={(c) => this._container = c}>... 

この方法で、あなたはscrollPositionsアレイと負荷を持続するためのlocalStorageやredux storeを使用することができますルート変更後に再びそれをアップします。

この例はIMHOとしてのReact Tabsとは関係がありません。問題は2つのナビゲーション状態間でのスクロール位置の保存に関する問題です。それはreact-tabsかmaterial-ui's tabsですか

詳しい情報

タブコンポーネントは、あなたがタブ間を移動するときにすべてのタブをレンダリングし、オンとオフ可視性を切り替えることにより、スクロール位置を保持します。タブのスタイルを{height：0、overflow：hidden}に設定し、この方法でコンテナをスクロール位置に維持します。

説明したように、これはルートコンポーネントを変更しても機能しません。コンポーネントがリロードされるとスクロール位置がリセットされます。ルートがルート変更の副作用を事前に知ることができないため、これはおそらく適切な動作です。

this relevant Github threadからダン・アブラモフ監督を引用する：それはあなたのコンポーネントと同じようにレンダリングするのはあなた次第です...

。たとえば、データをローカルにキャッシュしないと、ルータが自分の位置を復元することはできません。しかし、それはブラウザのデフォルトの振る舞いがどのように動作するかです。

つまり、このパラダイムによれば、それはルータの責任ではなく、手動で行う必要があります。