在 React Router 中的相似路由之间切换

Question

我有这种路线：

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

它指向包含完整产品描述的页面。 “相关项目”很少。它们中的每一个都包含指向不同“itemDetails”页面的链接。当我单击此链接之一时，浏览器地址栏中的路线正在更改，但内容没有。 为什么？其余路线运行良好。 另外，如果我重新加载页面，内容会刷新，并且会与浏览器地址栏中的路线相匹配

这可能是因为不正确的 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;

这里还有相关的物品链接代码：

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

但是你在<link>中发送itemId：

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