javascript - Refresh component when new item selected using react-router -

i'm trying test out react functionality creating notes webapp. in left sidebar have list of notes logged in user. when 1 of notes selected want appear in main area of webpage.

this works first time select note not after this, unless manually refresh page. think component mounts first time , retrieves note when select note it's not updating component.

i using react-router, when select note traverses /notes/:note_id based on note selected. changes content doesn't refresh.

here noteitem code:

var react = require('react'); var webapiutils = require('../../utils/webapiutils.js'); var notestore = require('../../stores/notestore.react.jsx'); var noteactioncreators = require('../../actions/noteactioncreators.react.jsx'); var router = require('react-router'); var state = require('react-router').state;  var noteitem = react.createclass({   mixins: [ state ],    getinitialstate: function() {     return {       note: notestore.getnote(),       errors: []     };   },    componentdidmount: function() {     notestore.addchangelistener(this._onchange);     noteactioncreators.loadnote(this.getparams().noteid);   },    componentwillunmount: function() {     notestore.removechangelistener(this._onchange);   },    _onchange: function() {     this.setstate({       note: notestore.getnote(),       errors: notestore.geterrors()     });   },    render: function() {       return (       <div classname="row">       <div classname="note-title">{this.state.note.title}</div>         <div classname="note-body">{this.state.note.body}</div>       </div>     );   } });  module.exports = noteitem; 

and here's how i'm linking noteitem sidebar using react-router:

<link to="note" params={ {noteid: this.props.note.id} }>{this.props.note.title}</link> 

and routes:

<route name="app" path="/" handler={notesapp}>   <defaultroute />   <route name="login" path="/login" handler={loginpage}/>   <route name="signup" path="/signup" handler={signuppage}/>   <route name="notes" path="/notes" handler={notessidebar}/>   <route name="note" path="/notes/:noteid" handler={noteitem} /> <route> 

any appreciated.

thanks!

you need implement componentwillreceiveprops, other livecycle methods not called when dynamic segments change