如何在react-slick中使用react-router transitionTo？

Question

我正在使用react-slick（ https://github.com/akiran/react-slick ）制作轮播。 在轮播的每个幻灯片上，我想更改react-router（ 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>

        );
}

}）;