Cannot read property 'router' of undefined

[adamcoulombe]

Hi I like the approach this library uses and I am trying to get it working in my own code, but I am getting the following error

Any Ideas what that error means? I am pretty new to react and this particular error doesnt give me much detail. My files look like:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import Styles from './sass/styles.scss';
import {BrowserRouter} from 'react-router-dom';
import  'whatwg-fetch';

var json = [
    { "name" : "one" },
    { "name" : "two" },
    { "name" : "three" },
    { "name" : "four" },
    { "name" : "five" },
    { "name" : "six" }
];
ReactDOM.render( 
    <BrowserRouter><App slides={json} /></BrowserRouter>
, document.getElementById('root'));

app.js

import React, {PropTypes} from 'react';
import Slide from './Slide';
import {Link, Route, Router} from 'react-router-dom';
import {TransitionSwitch, TransitionRoute} from 'react-router-v4-transition';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      slides:props.slides,
      currentSlide:0,

    }
  }
  render() {

    return (
      <div>
        <TransitionSwitch >
          {this.state.slides.map((slide)=>
          <Route path="/slide/:slideName" key={"route_"+ slide.name }>
            <Slide
            key={ slide.name } 
            slideName={slide.name} 
            className={"slide_"+slide.name} 
            />
           </Route>

          )}

          </TransitionSwitch>
        <div className='pagination'>
        <Link to={'/slide/one'} >go</Link>
        </div>
      </div>
      );
  }

}

app.js

import React, {PropTypes} from 'react';
import gsap from 'gsap';

export default class Slide extends React.Component {
    constructor(props){
        super(props);
    }
  render() {
    return (
        <div className={'slide '+this.props.className} ref="slideRoot">
          {this.props.slideName} This is a slide
        </div>
      );
  }

  componentWillEnter (cb){
    console.log('willEnter');
    TweenMax.set(this.refs.slideRoot, {transformOrigin:'50% 50%'})
    TweenMax.fromTo(
        this.refs.slideRoot,
        0.8,
        { x: 1000  , alpha: 0, scale:0 },
        { x:"0", alpha: 1, scale:1,
            ease:Expo.easeInOut,
            onComplete: ()=>{
                cb();
            }
        }
    );
  };

  componentWillLeave (cb){
    console.log(this.props.currentDelta);
    TweenMax.set(this.refs.slideRoot, {transformOrigin:'50% 50%'})
    TweenMax.fromTo(
        this.refs.slideRoot,
        0.8,
        { x:"0", alpha: 1, scale:1 },
        { x: -1000  , alpha: 0, scale:0,
            ease:Expo.easeInOut,
            onComplete: ()=>{
                cb();
            }
        }
    );
  };

}

[adamcoulombe]

this seems to be the culprit: context is undefined. Any guess why that might be ?

[adamcoulombe]

I am seeing now that this relates to #13

https://github.com/aboeglin/react-router-v4-transition/pull/14 Fixed the issue. Need to pull that in!

[aboeglin]

18 fixes it and will be published to the npm package today !