Switching between similar routes in React Router - reactjs

Question

I have this kind of route:
<Route name="itemDetails" handler={ItemDetails} path="/item/:itemId"/>
It leads to the page, containing full product description.
There are few "related items". Each of them contains the Link to the different "itemDetails" page. When I'm clicking on one of this links, the route is changing in browser address bar, but the content is not.
Why? The rest of routes works well.
Also, if i reload the page, content is refreshing and it's mutching to the route in browser address bar
It might be because of the incorrect url listener
It 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 the 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 the 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;

Answer 1

I think this is the issue:
Your router is expecting :id:
<Route name="itemDetails" handler={ItemDetails} path="/item/:id"/>
But you are sending itemId in the <link>:
<Link to="ItemDetails" params={{itemId: item.objectId, CustomID: item.CustomID}} className="btn</Link>
I am pretty sure it should match and be:
<Link to="ItemDetails" params={{id: item.objectId, CustomID: item.CustomID}} className="btn</Link>
See the docs for it here where the example confirms this:
params: An object of the names/values that correspond with dynamic segments in your route path.
Docs Example
// given a route config like this
<Route name="user" path="/users/:userId"/>
// create a link with this
<Link to="user" params={{userId: "123"}}/>
// though, if your user properties match up to the dynamic segements:
<Link to="user" params={user}/>