Strategie für Pinterest Produkt Jagd Stil Modalverben und Routing

Question

(Ich verwende die neuesten Versionen von Reaktion, React-Router und React-Aria-Modal)

I Routing Verhalten wie das auf Pinterest oder Produkt-Jagd gesehen zu schaffen versuchen. Für diejenigen, die es nicht kennen, läuft es darauf hinaus, einen Feed der Dinge (Pins, Produkte, etc.) in einem Vorschau-Modus zu haben. Wenn Sie in dieser Vorschau auf den Namen oder einen Link "Mehr anzeigen" klicken, wird das Ding in einem Modal geöffnet und die Route entsprechend geändert. Wenn ich diese URL kopieren oder einfügen oder die Seite aktualisieren soll, rendert das Ding jetzt wie eine Seite.

Also, auf der 'View More' Link Komponente, ich den Zustand einrichten (view = Modal) und in der Thing Komponente zu sehen, ob in einem Modal oder nicht zu rendern.

Also, im Wesentlichen:

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

Innerhalb eines Thing, sieht es in etwa wie folgt aus:

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(); 
    } 
} 

ich in ein Problem laufen, wo jetzt die Seite Hintergrund auf einen Link auf Klick verschwindet während das Modal erscheint. Ich stelle mir vor, dass dies auf die Navigation durch Klicken auf den Link zurückzuführen ist.

React-Router hat eine example like this, die dies löst, aber das hat auch einige Probleme. Sie scheinen im Wesentlichen die vorherigen Kinder auf der Ebene App zu speichern und zusätzlich zum angeforderten Modal/Route zu rendern - was im Wesentlichen eine erneute Wiedergabe des gesamten Feeds verursacht, die sich weder performant noch sauber anfühlt.

Darüber hinaus, wenn 'Next/Previous' style interaction eingerichtet werden sollte, scheint der gesamte Hintergrund geladen zu werden, sobald der Routerstatus aktualisiert wurde, indem Sie auf 'Next/Previous' geklickt haben.

Also frage ich mich, wie man am besten darüber nachdenkt, dies einzurichten - damit die vorherige Seite immer noch im Hintergrund erscheint und die Route auch aktualisiert wird.

Alle Gedanken wären super geschätzt!

Answer 1

Ich habe eine CodePen that demonstrates Pinterest routing geschrieben. Es verwendet den Navigation router anstelle des React Routers, aber ich hoffe, dass Sie dafür offen sind. Sie können sehen, dass wenn die oldState ist, dann ist die Liste sichtbar und ich rendere in das modale div. Wenn die oldState leer ist, dann ist die Liste nicht sichtbar und ich rendere in den Container div. Sie können dies ausprobieren, indem Sie einen der Hyperlinks in einem neuen Tab öffnen. Wenn Sie Fragen zum Code haben, lassen Sie es mich wissen.

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();