React router - Update URL hash without re-rendering page

Question

Using react-router I'm looking for a way to update the page URL / hash, without the router re-rendering the whole page.

I am developing a full page carousel, and would like each slide to have it's own URL (allowing the user to refresh the page and return to the correct slide). The carousel will later have swipe similar to this demo, which means the next slide is pre-rendered.

A stripped down version of my carousel is available here.

The current slide change looks like this:

onClickLeft: function() {   this.setState({     selected: this.state.selected - 1   }); } 

This works fine, with no URL updates. What I really want is:

mixin: [Navigation], onClickLeft: function() {   this.transitionTo('carousel-slide', {num: this.state.selected + 1}); } 

This would set the prop of the current slide, allowing the carousel to animate. However using this method now causes the page to re-render and no animation is displayed.

I have seen the ReactCSSTransitionGroup used for route transitions, however this seems geared toward rendering a new page and transitioning out the old one.

If there's already a way to achieve what I'm looking for, and I've missed it, could someone point me in the right direction?

Answer 1

1.0

react-router no longer sets a key on your routes. If you do need to set a key from a route handler, put it on a surrounding element.

return (   <div key={this.props.params.bookId}>     {this.props.children}   </div> ); 

0.13

It's now <ReactRouter.RouteHandler key="anything" />, but this is also no longer really needed due to changes in react-router. See the changelog for more details.

0.12

Currently, react-router sets a key on your handler based on the current route. When react does its diff, and notices a different key, it throws out the entire subtree both in virtual and real dom, and rerenders.

To prevent this, you can override react-router's key when using activeRouteHandler()

this.props.activeRouteHandler({key: "anything"})