Reactjs 链接，activeClassName只是简单的不工作

我无法使activeClassName在导航组件链接中正确呈现。这可归结为以下症状：

在下面的代码中，导航组件根本没有获得传递给它的props.route。应用程序组件有一个props.route，但是当用户导航到其他路由时，它永远不会更新。它始终设置为加载的第一条路线。组件WillReceiveProps在更改路线时被激发，因为props.children正在更改

以下是我的文件的相关片段：

app.jsx

只需将该位置道具添加到会导致重新渲染，而无需任何其他代码

我认为发生这种情况的原因是，无论实际显示的是哪条路线，应用程序总是被认为位于/的route.path。它的直接子级似乎获得了适当的route.path，但导航作为应用程序的嵌套组件却没有。事实上，它根本不接收路线道具，因为它没有直接被路线道具引用

---

也就是说，这将如何工作？您是否不能简单地包含链接，并期望它按所描述的方式工作？我觉得我错过了一些关键的反应路由器应该如何工作

我认为activeClassName不起作用的原因是您正在使用connect 导出默认连接导航

看这个问题

据报告，React Router 3.0.0-alpha.1及更新版本中已将其修复

我发现在旧版本的react router中可以使用的另一个黑客补丁是传递{pure:false}告诉connect它不是纯组件

export default connect(mapStateToProps, null, null, { pure: false })(Navigation);

---

我认为activeClassName不起作用的原因是您正在使用connect 导出默认连接导航

看这个问题

据报告，React Router 3.0.0-alpha.1及更新版本中已将其修复

我发现在旧版本的react router中可以使用的另一个黑客补丁是传递{pure:false}告诉connect它不是纯组件

export default connect(mapStateToProps, null, null, { pure: false })(Navigation);

---

react和react路由器的版本是什么？请尝试从链接中删除前导斜杠，而不是IndexLink。您可以提供此.props.route.path的值吗？让我们快速检查一下，单击链接时是否会重新呈现Navigation.jsx？我想是这样，但排除这种情况也无妨。您的react和react路由器版本是什么？尝试从链接中删除前导斜杠，而不是IndexLink？您可以提供此.props.route.path的值吗？让我们快速检查一下，当单击链接时是否会重新呈现Navigation.jsx？我想是的，但排除这个可能性也没什么坏处。{pure:false}这件事对我很有效。这是一个很烦人的问题！{pure:false}这件事对我起了作用。这是一个很烦人的问题！

import React from 'react';
import Navigation from 'Navigation';


export default class App extends React.Component {
  static propTypes = {};

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Navigation />
        <div className="content">
          {this.props.children}
        </div>
      </div>
    );
  }
};

import React from 'react';
import {connect} from 'react-redux';
import {IndexLink, Link} from 'react-router';


export class Navigation extends React.Component {
  static propTypes = {};

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="top-bar navigation">
        <div className="row">
          <div className="small-12 columns">
            <div className="top-bar-left">
              <ul className="menu">
                <li className="menu-text">
                  TVDeadpool.xyz
                </li>
                <li>
                  <IndexLink to="/" activeClassName="link-active">Bets</IndexLink>
                </li>
                <li>
                  <Link to="/help" activeClassName="link-active">Help</Link>
                </li>
                <li>
                  <Link to="/about" activeClassName="link-active">About</Link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default connect()(Navigation);

import React from 'react';
import Navigation from 'Navigation';


export default class App extends React.Component {
  static propTypes = {};

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Navigation location={this.props.location.pathname}/>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    );
  }
};

export default connect(mapStateToProps, null, null, { pure: false })(Navigation);