Rendern von Unteransichten, Verwalten des Verlaufs und nicht erneutes Rendern der gesamten Ansicht. Ist das möglich?

Question

Ich migriere eine existierende React App von director auf react-router um. Während ich es bis jetzt liebe, war das Verwalten der Historie ohne erneute Wiedergabe einer ganzen Seite mit Director einfach, und ich bin mir nicht sicher, ob dies mit react-router möglich ist.

Was ich tun möchte, ist eine Ansicht, nennen wir es Slides und zwei andere verschachtelte Ansicht Komponenten nennen wir sie One und Two.

Im Router würden diese Komponenten /slides, slides/one und slides/two zugeordnet werden.

Slides enthält verschiedene Layoutkomponenten wie Header, Nav und Footer. Diese sind im Wesentlichen statisch.

Jetzt gibt es eine Übergangsanimation, die beim Navigieren zwischen den Dias abgespielt wird. Mit meinem vorherigen Router konnte ich dies erreichen, ohne Slides und alle seine Unterkomponenten wieder rendern zu müssen. Nach dem Lesen https://github.com/reactjs/react-router/issues/266 und https://github.com/reactjs/react-router/issues/3691 dachte ich, dass dies möglicherweise nicht möglich ist.

Ist die akzeptierte Möglichkeit, dies über CSSTransitionsGroup zu tun und akzeptieren Sie einfach das Rendern? Es wäre nicht so gut für die Benutzeroberfläche, wenn das Rendering langsam wäre und diese statischen Komponenten ein- und ausblinken oder so.

Jeder Rat würde geschätzt werden!

Answer 1

Sie benötigen Unter Routen zu definieren:

<Route path="slides" component={Slides}> 
    <Route path="one" component={SlideOne}/> 
    <Route path="two" component={SlideTwo}/> 
    <Route path="three" component={SlideThree}/> 
</Route> 

Dann auf Slides.jsx Sie {this.props.children} in Ihrer render() Methode verwenden, um festzulegen, wo die untergeordneten Komponenten werden durch den Router eingesetzt werden.

/slides/one wird die Komponente Slides und die Komponente SlideOne usw. machen, wenn es eine Änderung der Route /slides/one-/slides/two nur das Kind Komponente gerendert werden. Slides wird nicht aktualisiert.

Um die Geschichte Sie müssen verwalten auf dem Router eine Geschichte Stütze definieren:

<Router history={browserHistory}> 
... 
</Router> 

These are the docs über die verschiedenen Module Geschichte.