Last active
November 22, 2017 06:24
-
-
Save MathieuLorber/61ee584e375c41cd60038a11a9bf437b to your computer and use it in GitHub Desktop.
Attempt of react-router v4 onEnter replacement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {PropTypes} from "react"; | |
import {BrowserRouter as Router, Route, Link} from "react-router-dom"; | |
// from the documentation Auth example | |
// https://reacttraining.com/react-router/examples | |
const Test = () => ( | |
<Router> | |
<div> | |
<ul> | |
<li><Link to="/test/1">1</Link></li> | |
<li><Link to="/test/2">2</Link></li> | |
<li><Link to="/test/3">3</Link></li> | |
</ul> | |
<MyRoute path="/test/:id" | |
render={(state) => { | |
// seems ok ? | |
console.log('MyRoute render'); | |
return <MyComponent match={state.match}/>; | |
}}/> | |
</div> | |
</Router> | |
); | |
class MyRoute extends Route { | |
componentDidMount() { | |
// called once | |
console.log('MyRoute componentDidMount'); | |
console.log(this.props); | |
} | |
// everything is ko ! | |
// componentWillMount() { | |
// console.log('MyRoute componentWillMount'); | |
// console.log(this.props); | |
// } | |
componentWillReceiveProps() { | |
// never called | |
console.log('MyRoute componentWillReceiveProps'); | |
console.log(this.props); | |
} | |
} | |
class MyComponent extends React.Component { | |
componentWillMount() { | |
// called once | |
console.log('MyComponent will mount'); | |
console.log(this.props); | |
} | |
componentDidMount() { | |
// called once | |
console.log('MyComponent did mount'); | |
console.log(this.props); | |
} | |
componentWillReceiveProps() { | |
// needs manuel check | |
console.log('MyComponent componentWillReceiveProps'); | |
console.log(this.props); | |
} | |
render() { | |
return <p> | |
{this.props.match.params.id} | |
</p> | |
} | |
} | |
export default Test |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I used the following code