Javascript react路由器中链接上的自定义类名

我在react路由器中遇到链接问题

我遇到的问题是，当我将

className

添加到

时，它不起作用，但当我删除它时，链接工作正常。当我说它不工作时，我的意思是链接实际上不工作，但是类被添加到链接中

这行不通

<Link to="cart" className="button" params={{event_id: this.props.event_id}}>Find Tickets</Link>

查找票证

但这是真的

<Link to="cart" params={{event_id: this.props.event_id}}>Find Tickets</Link>

查找票证

我的组件

import React from 'react';
import { Link } from 'react-router';

import Header from '../components/header.js';
import If from '../utils/helpers';
import QuantityInput from '../components/quantity.js';
import MultiSelect from '../components/dropdowns.js';


class Product extends React.Component {
  render() {
    var content;
    var eventName;
    var eventDate;
    var eventVenue;
    if (this.props.items.length > 0) {
      this.props.items.map(function(product) {
        var event_name = product.event_name;
        var event_date = product.event_date;
        var event_venue = product.event_venue;
        var items = product.priceCode.map(function(priceCode) {
          return (
            <div className="list-item" key={priceCode.priceCode_id}>
              <div className="list-info list-info--cart">
                <div className="list-info__venue">
                  <h3 className="event-title">{priceCode.priceCode_title}</h3>
                  <If condition={priceCode.priceCode_passcode}>
                    <input type="text" placeholder="Passcode" />
                  </If>
                  <span className="event-details">{priceCode.priceCode_info}</span>
                </div>
              </div>
              <div className="controls">
                <div className="list-info__price">{priceCode.priceCode_price}</div>
                <QuantityInput />
              </div>
            </div>
          )
        });

        eventName = {event_name}
        eventDate = {event_date}
        eventVenue = {event_venue}
        content = {items}
      });
    }

    return (
      <div>
        <Header event_name={eventName} event_date={eventDate} event_venue={eventVenue} />
        <div className="selection-method">
          <div className="selection-method__dropdowns">
            <MultiSelect items={['Open', 'H', 'V']} placeholder="Best Available" />
          </div>
          <div className="selection-method__dropdowns">
            <MultiSelect items={['All', 'Lower Bowl', 'Upper Bowl']} placeholder="Location" />
          </div>
          <div className="selection-method__dropdowns">
            <MultiSelect items={['Open', 'H', 'V']} placeholder="Section" />
          </div>
          <div className="selection-method__dropdowns">
            <MultiSelect items={['Open', 'H', 'V']} placeholder="Price Level" />
          </div>
          <div className="selection-method__dropdowns">
            <hr className="vertical" />
            <a href="#" className="button button--gray">Sell by Map</a>
          </div>
        </div>
        <div className="list-view list-view--cart">
          {content}
        </div>
      </div>
    );
  }
}

class ProductContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      quantity: 0
    };
  } 

  componentWillMount() {
    this.loadProducts('http://private-4dfdc-ember26.apiary-mock.com/events/' + this.props.event_id);
  }

  loadProducts(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      success: function(data) {
        this.setState({
          data: data
        });
      }.bind(this),
      error: function(xhr, status, err, data) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }

  _hasData() {
    var displayedItems = this.state.data.filter(function(product) {
      var match = product.priceCode.filter(function(priceCode) {
        return priceCode.priceCode_title.toLowerCase();
      });

      return (match !== -1);
    }.bind(this));

    return (
      <div>
        <Product items={displayedItems} />
      </div>
    );
  }

  render() {
    if (this.state.data) {
      return (
        <div className="price-code">
          {this._hasData()}
          <div className="subtotal-wrapper">
            <a href="#" className="button button--gray">Clear Selections</a>
            <Link to="cart" params={{event_id: this.props.event_id, event_name: this.props.event_name}}>Find Tickets</Link>
          </div>
        </div>
      )          
    } else {
      return <div>Loading...</div>;
    }

    return false
  }
}

export default ProductContainer;

从“React”导入React；
从“反应路由器”导入{Link}；
从“../components/Header.js”导入标题；
如果从“../utils/helpers”导入；
从“../components/quantity.js”导入QuantityInput；
从“../components/dropdowns.js”导入MultiSelect；
类产品扩展了React.Component{
render（）{
var含量；
var事件名；
var事件日期；
活动地点；
如果（this.props.items.length>0）{
this.props.items.map（函数（产品）{
var event_name=product.event_name；
var事件日期=产品事件日期；
var事件地点=产品事件地点；
var items=product.priceCode.map（函数（priceCode）{
返回(
{priceCode.priceCode_title}
{priceCode.priceCode_info}
{priceCode.priceCode_price}
)
});
eventName={event_name}
eventDate={event_date}
EventVincement={event_Vincement}
内容={items}
});
}
返回(

{content}
);
}
}
类ProductContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
数量：0
};
} 
组件willmount（）{
这是loadProducts（'http://private-4dfdc-ember26.apiary-mock.com/events/“+this.props.event_id）；
}
加载产品（url）{
$.ajax({
url:url，
数据类型：“json”，
成功：功能（数据）{
这是我的国家({
数据：数据
});
}.绑定（此），
错误：函数（xhr、状态、错误、数据）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
}
_hasData（）{
var displayedItems=this.state.data.filter（函数（产品）{
var match=product.priceCode.filter（函数（priceCode）{
返回priceCode.priceCode_title.toLowerCase（）；
});
返回（匹配！=-1）；
}.约束（这个）；
返回(
);
}
render（）{
if（this.state.data）{
返回(
{this.\u hasData（）}
找票
)          
}否则{
返回装载。。。；
}
返回错误
}
}
导出默认产品容器；

如何向锚元素添加自定义类名？我读过关于

activeClassName

的文章，但从我所读到的内容来看，只有当链接处于活动状态时才适用

---

任何帮助都将不胜感激。

这就是方法，你是如何从react路由器导入链接的？我是这样从react路由器导入的

import{Link}请粘贴整个组件好吗？我已经用实际组件编辑了原始问题签出