Link，activeClassName 根本不起作用

Question

我无法 activeClassName 在我的导航组件 Link 中正确呈现。这已被追踪到以下症状：

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

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

app.jsx

import router from 'app/router';

[...]

ReactDOM.render(
  <Provider store={store}>
    {router}
  </Provider>,
  document.getElementById('app')
);

router/index.jsx

export default (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={GameBoard}/>
      <Route path="profile" component={ProfileBoard}/>
      <Route path="profile/:userId" component={ProfileBoard}/>
      <Route path="help" component={Help}/>
      <Route path="about" component={About}/>
    </Route>
  </Router>
);

App.jsx

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

Navigation.jsx

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

Navigation.jsx 已简化。如果您已登录，我删除了一些显示注销 link 的功能，并处理了 link。不过，这就是我包含 connect 的原因。

我正在翻阅 react-router 的文档，但终究无法弄清楚我哪里出错了。我想这一定与 <Provider/> 中的嵌套有关？任何帮助将不胜感激！

请注意，如果您想在（实际）操作中看到这一点，请查看 TVDeadpool.xyz。不是插头，只是事实。

更新

这是一个黑客修复：

App.jsx

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

只需将 location 属性添加到 <Navigation/> 即可导致重新渲染，无需任何额外代码。

我认为发生这种情况的原因是 App 始终被认为位于“/”的 route.path，无论实际显示的是什么路线。它的直接子级似乎获得了适当的 route.path，但作为 App 的嵌套组件的 Navigation 却没有。事实上，它根本没有收到 route 道具，因为它没有被 <Route/>.

直接引用

也就是说，这将如何运作？您是否应该不能简单地包含 Link 并期望它像描述的那样工作？我觉得我缺少一些关于 react-router 应该如何工作的关键。

Answer 1

我认为 activeClassName 不起作用的原因是因为您正在使用连接 export default connect()(Navigation);

看到这个问题... https://github.com/reactjs/react-redux/issues/388

据报道在 React Router 3.0.0-alpha.1 和更新版本中已修复。

我发现你可以在旧版本的 React 路由器中使用的另一个 hack 修复是传递 {pure : false} 来告诉 connect 它不是一个纯组件...

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

Link，activeClassName 根本不起作用

Link, activeClassName just plain not working

reactjs

react-router

react-redux