Question

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

在以下代码中，导航组件根本没有传递给它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')
);

路由器/ 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已经简化。如果您已登录，我删除了一些显示Logout链接的功能，并处理该链接。这就是我包括connect的原因。

我正在通过反应路由器的文档，但不能为我的生活找出我出错的地方。它必须与<Provider/>内的嵌套有关，我想？任何帮助将不胜感激！

请注意，如果您想在（in）操作中看到此信息，请查看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总是被视为＆＃34; /＆＃34;的route.path。它的直接孩子似乎得到了合适的route.path，但作为App的嵌套组件的Navigation却没有。实际上，它根本没有收到route道具，因为<Route/>没有直接引用它。

那说，这怎么会有用？您是否应该能够简单地包含Link并期望它按照描述工作？我觉得我错过了一些关键的反应路由器应该如何工作。

Answer 1

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

请参阅此问题... https://github.com/reactjs/react-redux/issues/388

报告已在React Router 3.0.0-alpha.1及更新版本中修复。

我发现你可以在旧版本的反应路由器中使用的另一个黑客修复是通过{pure：false}来告诉连接它不是一个纯粹的组件......

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

链接，activeClassName只是无法正常工作

1 个答案: