Question

我有一个侧边栏菜单，用于导入包含菜单项列表的子组件。我想将activeClassName设置为子组件<Link />中的每个<SideMenuContainer />。但是，活动链接仅适用于页面加载。

import React, { Component } from 'react';
import SideMenuContainer from './SideMenu/SideMenuContainer';

export default class CompanyInfoMenu extends Component {

  constructor() {
    super();
    this.toggleShow = this.toggleShow.bind(this);
    this.state = {
      isShow: false,
    };
  }

  toggleShow() {
    this.setState({ isShow: !this.state.isShow });
  }

  render() {
    return (
      <div>   
        <ul>
          <li>
            <span onClick={() => this.toggleShow()}>button</span>
            {this.state.isShow ? <ul><SideMenuContainer /></ul> : <div></div>}
          </li>
        </ul>
      </div>
    );
  }
}

路由看起来像这样

<IndexRedirect to="client-info" />
<Route path="client-info" component={ClientInfoSection}>
  <IndexRedirect to="BasicInformation" />
  <Route path=":itemType" component={ItemContentContainer} />
  <Route path="company-introduction" component={CompanyInformationContainer} />
</Route>

当:itemType更改时，activeClassName不适用。

<SideMenuContainer />看起来像这样

return (
  <ul>
      <li>
        <Link
          to={`/client-info/${item.itemType}`}
          activeClassName="active"
        >
          item1
        </Link>
      </li>
  </ul>
);

Answer 1

这是react-router v2.x.x中动态路由的已知错误：https://github.com/ReactTraining/react-router/issues/3286

要使路由正常工作，您应该将{ pure: false }添加到connect（）参数：

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

单击链接时，activeClassName在sideMenu上不起作用

1 个答案: