在類似的航線之間切換陣營路由器

Question

我有這樣的路線：

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

這導致了網頁，其中包含完整的產品說明。 很少有「相關項目」。他們每個人都包含鏈接到不同的「itemDetails」頁面。當我點擊其中一個鏈接時，路由在瀏覽器地址欄中發生變化，但內容不變。 爲什麼？其餘路線運作良好。 另外，如果我重新加載頁面，內容令人耳目一新，它的mutching的路線在瀏覽器地址欄中

這可能是因爲不正確的網址收聽 它嘗試這樣的：

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：的對象名稱/值與路徑路徑中的動態段相對應。

文檔實例

// 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}/>