Переключение между подобными маршрутами в React маршрутизатор

Question

У меня есть такой маршрут:

<Route name="itemDetails" handler={ItemDetails} path="/item/:itemId"/> 

Это приводит к странице, содержащий полное описание продукта. Есть несколько «связанных предметов». Каждый из них содержит ссылку на разные страницы itemDetails. Когда я нажимаю на одну из этих ссылок, маршрут меняется в адресной строке браузера, но контент отсутствует. Почему? Остальные маршруты работают хорошо. Кроме того, если я перезагрузить страницу, содержание освежает и это mutching на маршрут в адресной строке браузера

Это может быть из-за неправильного URL-адреса слушателя Он попытался это:

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.getElementById('example')); 
}); 

и это:

Router.run(routes, Router.HashLocation, function (Root) { 
    React.render(React.createElement(Root, null), document.body); 
}); 

Вот код itemDetails:

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; 

А вот relatedItem код Ссылка:

<Link to="ItemDetails" params={{itemId: item.objectId, CustomID: item.CustomID}} className="btn</Link> 

Здесь магазин:

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

Я думаю, что это вопрос:

Ваш маршрутизатор ожидает :id:

<Route name="itemDetails" handler={ItemDetails} path="/item/:id"/> 

Но вы отправляете itemId в <link>:

<Link to="ItemDetails" params={{itemId: item.objectId, CustomID: item.CustomID}} className="btn</Link> 

Я уверен, что он должен соответствовать и быть:

<Link to="ItemDetails" params={{id: item.objectId, CustomID: item.CustomID}} className="btn</Link> 

смотрите документацию для этого here где пример подтверждает это:

Params: объект из имена/значения, которые соответствуют динамическим сегментам в вашем маршруте маршрута.

Docs Пример

// given a route config like this 
<Route name="user" path="https://stackoverflow.com/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}/>