Cannot read property 'router' of undefined #17
Description
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();
}
}
);
};
}