如何使用react-router transitionTo和react-slick？

Question

我正在使用反应光滑（https://github.com/akiran/react-slick）来制作旋转木马。在传送带的每张幻灯片上，我想更改反应路由器（https://github.com/rackt/react-router）处理程序。

这里是我的旋转木马：

var Carousel = React.createClass({ 
mixins: [ Navigation], 

render() { 
    var settings = { 
     dots: false, 
     infinite: true, 
     arrows: true, 
     speed: 500, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     beforeChange: function(event){ 
      transitionTo('about') // this is where I want to transition to different paths 
     }, 
     initialSlide: 3 
    }; 
    return (
     <Slider {...settings}> 
      <div><h3></h3></div> 
      <div><h3>2</h3></div> 
      <div><h3>3</h3></div> 
      <div><h3>4</h3></div> 
      <div><h3>5</h3></div> 
      <div><h3>6</h3></div> 
     </Slider> 
    ); 
} 
}); 

这里是我的反应路线代码::

var routes = (
    <Route name='app' path='/' handler={App}> 
    <Route name='home' handler={Home}/> 
    <Route name='about' handler={About}/> 
    <DefaultRoute handler={Home}/> 
    </Route> 
); 



Router.run(routes, Router.HistoryLocation, function (Handler) { 
    React.render(<Handler />, appContainer); 
}); 

Answer 1

我嵌套在父组件旋转木马组件，并呼吁this.context.router.transitionTo()。

var App = React.createClass({ 
    mixins: [ Navigation ], 

    render() { 
    console.log(this); 
    var self = this; 
    var settings = { 
     dots: false, 
     infinite: true, 
     arrows: true, 
     speed: 500, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     initialSlide: 0, 
     afterChange: function(event){ 
      console.log(event); 
      var path = event.toString(); 
      self.context.router.transitionTo(path); 
     } 

    }; 
    return(

    <div className="grid-frame vertical"> 
     <div className="grid-content shrink" style={{padding: 0}}> 
      <ul className="primary condense menu-bar"> 
       <li><a><strong>Nav</strong></a></li> 
       <li><Link to="home">Home</Link></li> 
       <li><Link to="1">About</Link></li> 
      </ul> 
     </div> 
     <div className="grid-content carousel-container"> 
      <div className="grid-container"> 
       <Slider {...settings}> 
        <div><h3>1</h3></div> 
        <div><h3>2</h3></div> 
        <div><h3>3</h3></div> 
        <div><h3>4</h3></div> 
        <div><h3>5</h3></div> 
        <div><h3>6</h3></div> 
       </Slider> 
      </div> 
     </div> 

     <div className="grid-content"> 
      <div className="grid-container"> 
       <RouteHandler /> 

      </div> 
     </div> 
    </div> 

     ); 
} 

}）;