reactjs - How to give call to routing code again in react.js es6? -

import react 'react';  import { route, defaultroute, notfoundroute } 'react-router';  import app './app';  import tasklist './components/tasklist';  import {fetchdata } './utils/apiutils';  import config '../application.config';    var data={};      var roleid = $('#hdnroleid').val();      fetchdata(config.url+'/roles/'+roleid+'/tasks.json?tenantid='+config.tenantid).then(function(items)      {          console.log('tried fetch roles');          console.log(items);          data =items;          console.log('inside routes item fetched');      }).catch(function(response)      {          console.log(response);      });    export default (    <route handler={app}>      <route handler={tasklist} data={data} >      </route>      {data.map(task =>                <route name={task.pagename}  handler={require(task.actualrout)}>               </route>            )}    </route>  );

i learning react.js , got stucked in following issue. have given call api fetch records. but, till records fetched, doesn't wait , code written in "export default" executed. once record fetched, again comes same page , sets records in "data" variable. but, @ time, code written in "export default" not executed. because of which, routing not working. please tell me solution.

shortly speaking should store fetch results in state , rerender:

import react 'react'; import { route, defaultroute, notfoundroute } 'react-router'; import app './app'; import tasklist './components/tasklist'; import {fetchdata } './utils/apiutils'; import config '../application.config';  // use react components instead of plain function export default class router extends react.component {   constructor(props) {     // initial state     this.state = {       isloading: true,       data: {}     }   }    // start fetching when component initialized    componentdidmount() {     var self = this;     var roleid = $('#hdnroleid').val();     fetchdata(config.url+'/roles/'+roleid+'/tasks.json?tenantid='+config.tenantid).then(function(items)     {         console.log('tried fetch roles');         console.log(items);         // cause rerender         self.setstate({           isloading: false,           data: items         })         console.log('inside routes item fetched');     }).catch(function(response)     {         self.setstate({           isloading: false         })         console.log(response);     });   }    render() {     if (this.state.isloading) {       return (<div>{'is loading...'}</div>);     }     // moment data loaded if no errors     return (       <route handler={app}>         <route handler={tasklist} data={this.state.data} >         </route>         {data.map(task =>                   <route name={task.pagename}  handler={require(task.actualrout)}>                  </route>               )}       </route>);   } };