javascript - Rendering sub views, maintaining history and not re rendering the entire view. Is this possible? -
i migrating existing react app on using director
using react-router
. while i'm loving far, maintaining history without re rendering entire page easy director, , i'm not sure whether possible react-router
.
what have view, let's call slides
, 2 other nested view components let's call them one
, two
.
in router, these components map /slides
, slides/one
, slides/two
.
slides
contains various layout components header
, nav
, footer
. these static.
now, there transitional animation play when navigating between slides. previous router, able achieve without having render slides
, sub components again. after reading https://github.com/reactjs/react-router/issues/266 , https://github.com/reactjs/react-router/issues/3691 figured may not possible.
is accepted way via csstransitionsgroup
, accept re renders? not ui if render slow , static components blinked in , out or something.
any advice appreciated!
you need define sub routes:
<route path="slides" component={slides}> <route path="one" component={slideone}/> <route path="two" component={slidetwo}/> <route path="three" component={slidethree}/> </route>
then on slides.jsx
use {this.props.children}
in render()
method define child components inserted router.
/slides/one
render component slides
, component slideone
, etc. when there's change of route /slides/one
/slides/two
child component rendered. slides
not updated.
to manage history need define history prop on router:
<router history={browserhistory}> ... </router>
these docs different history modules.
Comments
Post a Comment