reactjs - Switching between similar routes in React Router -

i have kind of route:

<route name="itemdetails" handler={itemdetails} path="/item/:itemid"/> 

it leads page, containing full product description. there few "related items". each of them contains link different "itemdetails" page. when i'm clicking on 1 of links, route changing in browser address bar, content not. why? rest of routes works well. also, if reload page, content refreshing , it's mutching route in browser address bar

it might because of incorrect url listener tried this:

router.run(routes, function (handler) {   react.render(<handler/>, document.getelementbyid('example')); }); 

and this:

router.run(routes, router.hashlocation, function (root) {   react.render(react.createelement(root, null), document.body); }); 

here itemdetails code:

var react = require('react'); var store = require('../../stores/app-store'); var preloader = require('../template/app-preloader'); var newestateitem = require('./app-newestateitem'); var newestaterelated = require('./app-newestaterelated');  var newestatedetails = react.createclass({         getinitialstate: function() {     return { item: null };   },     componentwillmount: function() {     itemid = this.props.params.itemid;     console.log('itemid:', itemid);     store.getnewestatebyid(itemid,this._getnewestatedetails);   },      render: function() {         var item = this.state.item;     if(!item) {       return (<preloader />);     }         return (             <div classname="row">                 <div classname="container flex-container">                     <div classname="col s12 m12 l8">                         <div classname="col s12">                             <h4>{item.name}</h4>                         </div>                     <div classname="col l4 hide-on-med-and-down margintop">                     <h5 classname="center">related items</h5>                         <div classname="col s12">                             <newestaterelated price={item.price}/>                               </div>                     </div>                 </div>             </div>         );     },      _getnewestatedetails: function (item) {     this.setstate({item:item});   }  });  module.exports = newestatedetails; 

and here relateditem link code:

<link to="itemdetails" params={{itemid: item.objectid, customid: item.customid}} classname="btn</link> 

here store:

var getnewestatedata = {    getnewestatebyid: function(objectid, callback) {     console.log('store.objectid', objectid);     function newestatedata() {};     var item = backendless.persistence.of( newestatedata ).findbyid( objectid );     console.log("store.getnewestatebyid", item);     callback(item);   },    getallnewestate: function(callback) {     function newestatedata() {};     var items = backendless.persistence.of( newestatedata ).find().data;     callback(items)   },    getrelatednewestateitems: function (pricebottom, pricetop, callback) {     function newestatedata() {};     var items = backendless.persistence.of( newestatedata );     var dataquery = {       condition: "price >= "+pricebottom     }     var query = items.find( dataquery ).data     var output = query.slice(0,3)     console.log('relateditems', query);     callback(output)   } };  module.exports = getnewestatedata; 

i think issue:

your router expecting :id:

<route name="itemdetails" handler={itemdetails} path="/item/:id"/> 

but sending itemid in <link>:

<link to="itemdetails" params={{itemid: item.objectid, customid: item.customid}} classname="btn</link> 

i pretty sure should match , be:

<link to="itemdetails" params={{id: item.objectid, customid: item.customid}} classname="btn</link> 

see docs here example confirms this:

params: object of names/values correspond dynamic segments in route path.

docs example

// given route config <route name="user" path="/users/:userid"/>  // create link <link to="user" params={{userid: "123"}}/>  // though, if user properties match dynamic segements: <link to="user" params={user}/>