Pinterestの製品ハントスタイルのモーダルのための戦略と

Question

をルーティング（Iが反応、React-RouterとReact-Aria-Modalの最新バージョンを使用しています）

私はPinterestのか、製品ハントで見られるようなルーティング動作を作成しようとしています。よく知られていない人にとっては、フィードのもの（ピン、製品など）をプレビューモードで使用することになります。そのプレビューで名前またはいくつかの「もっと見る」リンクをクリックすると、モーダルで「もの」が開き、それに応じてルートが変更されます。そのURLをコピーして貼り付けたり、ページを更新したりする場合は、ページのようにレンダリングされるようになりました。

したがって、 '詳細を見る' Linkコンポーネントでは、状態（ビュー=モーダル）とThingコンポーネントを設定して、モーダルでレンダリングするかどうかを確認します。

だから、基本的に：Thing以内

<App> 
    <Feed> 
    {things.map((thingId) => <Thing id={thingId} />)} 
    </Feed> 
</App> 

、それはおおよそ次のようになります。私は今、ページの背景がリンクをクリックする上で消える問題が発生した

renderThing() { 
    return (
    <div> 
     <Name /> 
     <Link 
     to={"/things/ + this.props.id} 
     state = {{ 
      view: "Modal" 
     }} 
     > 
     View More 
     </Link> 
    </div> 
); 
} 

render() { 
    if(this.state.view == 'Modal'){ 
    return (<AriaModal>{renderThing()</AriaModal>); 
    } else { 
    return renderThing(); 
    } 
} 

モーダルが表示されます。私はこれがリンクをクリックすることによるナビゲーションのためであると想像します。

が反応-ルータはこれを解決それは同様にいくつかの問題を持っているexample like thisを持っています。彼らは本質的に以前の子供たちをAppレベルで保存して、要求されたモーダル/ルートに加えてそれをレンダリングするように見えます。これは本質的に、パフォーマンスの面でもクリーンでもないフィード全体の再レンダリングを引き起こします。 「次へ/前」スタイルの相互作用が設定されることになった場合

はまた、全体の背景が毎回ルータの状態も不要と感じる「前へ次へ/」をクリックして、更新されたロードされるだろうと思われます。

これを設定することについては、前のページがまだバックグラウンドで表示され、ルートも更新されるように、どのように考えるのが最善だろうと思います。

任意の考えは、スーパーいただければ幸いです！

Answer 1

私はCodePen that demonstrates Pinterest routingを書きました。それは、リアクタの代わりにNavigation routerを使用していますが、あなたはそれを公開していることを願っています。あなたはoldStateが移入された場合には、リストが表示されていると私はモーダルのdivにレンダリングすることがわかります。 oldStateが空の場合、リストは表示されず、コンテナdivにレンダリングされます。新しいタブでハイパーリンクの1つを開くことでこれを試すことができます。コードに関するご質問がありましたら、お知らせください。

var {StateNavigator} = Navigation; 
var {NavigationLink} = NavigationReact; 

var Thing = ({thing}) => <h2>{thing}</h2>; 

var Things = ({things, stateNavigator}) => (
    <div> 
    <ul> 
     {things.map(thing => 
     <li key={thing}> 
      <NavigationLink 
      stateKey="thing" 
      navigationData={{thing: thing}} 
      stateNavigator={stateNavigator}> 
      {thing} 
      </NavigationLink> 
     </li> 
    )} 
    </ul> 
    <div id="modal"></div> 
    </div> 
); 

var stateNavigator = new StateNavigator([ 
    {key: 'things', route: ''}, 
    {key: 'thing', route: 'thing'} 
]); 

var THINGS = ['one', 'two', 'three', 'four', 'five']; 

stateNavigator.states.things.navigated =() => { 
    ReactDOM.render(
    <Things things={THINGS} stateNavigator={stateNavigator} />, 
    document.getElementById('container') 
); 
}; 

stateNavigator.states.thing.navigated = (data) => { 
    var oldState = stateNavigator.stateContext.oldState; 
    ReactDOM.render(
    <Thing thing={data.thing} />, 
    document.getElementById(oldState ? 'modal' : 'container') 
); 
}; 

stateNavigator.start();