Rohan Deshpande Rohan Deshpande - 3 months ago 8
React JSX Question

Rendering sub views, maintaining history and not re rendering the entire view. Is this possible?

I am migrating an existing react app over from using

director
to using
react-router
. While I'm loving it so far, maintaining history without re rendering an entire page was easy with director, and I'm not sure whether this is possible with
react-router
.

What I would like to do is have a view, let's call it
Slides
and two other nested view components let's call them
One
and
Two
.

In the router, these components would map to
/slides
,
slides/one
and
slides/two
.

Slides
contains various layout components like
Header
,
Nav
and
Footer
. These are basically static.

Now, there is a transitional animation that will play when navigating between the slides. With my previous router, I was able to achieve this without having to render
Slides
and all its sub components again. After reading https://github.com/reactjs/react-router/issues/266 and https://github.com/reactjs/react-router/issues/3691 I figured that this may not be possible.

Is the accepted way to do this via
CSSTransitionsGroup
and just accept the re renders? It would be not so good for the UI if the render was slow and those static components blinked in and out or something.

Any advice would be appreciated!

Answer

You need to define sub routes:

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

Then on Slides.jsx you use {this.props.children} in your render() method to define where the child components will be inserted by the router.

/slides/one will render the component Slides and the component SlideOne, etc. When there's a change of route from /slides/one to /slides/two only the child component will be rendered. Slides will be not be updated.

To manage history you need to define a history prop on the router:

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

These are the docs about the different history modules.

Comments