fortrustit fortrustit - 1 year ago 59
React JSX Question

activeClassName does not work on the sideMenu when clicking on the link

I have a sidebar menu which imports a child component containing a list of menu items. I want to set the activeClassName to each of the

<Link />
in the child component
<SideMenuContainer />
. However, the active link only works on the page load.

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

export default class CompanyInfoMenu extends Component {

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

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

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

The routing looks like this

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

When the
changes, the activeClassName doesn't apply.

<SideMenuContainer />
looks like this

return (

Answer Source

This is known bug for dynamic routes in react-router v2.x.x:

To get the routes work properly you should add { pure: false } to the connect() parameters:

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