我有一个侧边栏菜单，它导入一个包含菜单项列表的子组件。我想将 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>
);