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