リアクタのルータ - どのようにタブのようなナビゲーションを達成するには？

Question

私はReactを使用して最初のアプリケーションを開発し、開発するのが初めてです。私のアプリケーションには4つのタブを持つタブコンポーネントがあり、各タブのコンテンツは別々のコンポーネントとして設定されていました。今私は4つの異なるルートでタブを置き換えています。だから、私はタブを取り除き、反応ルータを使って4つの経路を設定しました。

タブでは、タブの内容は別のタブに移動して戻るときの状態を維持します。たとえば、タブにリストがあり、ユーザーがリストの一番下にスクロールしたとします。ユーザーが別のタブに移動して戻ると、リストは下にスクロールされたままになります。これは私のアプリケーションにとって望ましい動作です。

しかし、私はルートでこの動作を達成できません。あるルートから別のルートに移動すると、コンポーネントが再インスタンス化される（再レンダリングされるだけではない）ことに気付きました。コンポーネントのルートがアクティブになるたびにコンポーネントのコンストラクターが呼び出されるため、これを知ることができます。

私はタブのような動作を達成したいと思います。 Angularには、（タブのようなナビゲーションのための）Deep State Redirectを提供するUI-Router-Extrasライブラリがあります。私のAngularプロジェクトではうまく動作します。しかし、私はReactで同様のオプションを見つけることはできません。私は反応ルータと反応ルータのコンポーネントを試して、そのルートがアクティブになったときにコンポーネントを再インスタンス化します。

Reactのルートでタブのような動作を実現するソリューションはありますか？

Answer 1

個人的には、このケースでは反応ルータを捨てて、現在のタブを含む状態の親コンポーネントを作成して表示し、アクティブなものだけを表示しました。

は、ここであなたは、2つのオプションがあり、タブに基づいてReduxの、または表示/非表示のコンポーネントを使用する非常に簡単な例

<div 
     style={{display: this.state.currentTab === 'component_a' ? 'block' : 'none'}} 
    > 
     <ComponentA /> 
    </div> 
    <div 
     style={{display: this.state.currentTab === 'component_b' ? 'block' : 'none'}} 
    > 
     <ComponentB /> 
    </div> 

Answer 2

です。あなたはReduxのを使用している場合は相続人

例表示/非表示のコンポーネント

{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}