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;

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

在React Router

1 个答案: