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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -