反应路由器

Question

我在react-router中遇到Link问题。

我遇到的问题是，当我向className添加<Link to>时，它不起作用，但当我删除它时链接正常。当我说它不起作用时，我的意思是链接实际上不起作用，但是类被添加到链接中。

这不起作用

<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;

如何将自定义classNames添加到锚元素？我已经阅读了activeClassName，但是从我读到的内容中只有在链接处于活动状态时才适用。

任何帮助都将不胜感激。