Sub menu is collapsing when a sub menu item is selected

[roblapp]

I am using react router 4 so I created a custom link object. Whenever I navigate to one of the sub menu options the menu collapses. I noticed on your example it stays open. For example, using your example if I chose Level 3 Menu 4 the menu would stay open. On mine it's collapsing. It's possible that is's an error in my code so I will show you want I have...

//CustomMenuLink.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter, matchPath } from 'react-router';
import { NavLink } from 'react-router-dom';
import classnames from 'classnames';

class CustomMenuLink extends Component {
  componentWillMount() {
    const obj = {
      path: this.props.to,
      strict: false,
      exact: true
    };
    const soln = matchPath(this.props.location.pathname, obj);

    if (soln !== null) {
        this.props.activateMe();
    }

    //router.isActive is NOT in react router 4
    // if (this.context.router.isActive({ pathname: this.props.to })) {
    //   this.props.activateMe();
    // }
  }

  render() {
    const {
      className,
      classNameActive,
      classNameHasActiveChild,
      active,
      hasActiveChild,
      to,
      externalLink,
      hasSubMenu,
      toggleSubMenu,
      activateMe,
      children,
    } = this.props;

    if (hasSubMenu || externalLink) {
      return (
        <a className={classnames(className, hasActiveChild && classNameHasActiveChild)} target={externalLink ? '_blank' : undefined} href={to} onClick={toggleSubMenu} >
          {children}
        </a>
      );
    }

    return (
      <NavLink className={classnames(className, active && classNameActive)} to={to} onClick={activateMe} >
          {children}
        </NavLink>
    );
  }
}

CustomMenuLink.propTypes = {
  className: PropTypes.string.isRequired,
  classNameActive: PropTypes.string.isRequired,
  classNameHasActiveChild: PropTypes.string.isRequired,
  active: PropTypes.bool.isRequired,
  hasActiveChild: PropTypes.bool.isRequired,
  to: PropTypes.string.isRequired,
  externalLink: PropTypes.bool,
  hasSubMenu: PropTypes.bool.isRequired,
  toggleSubMenu: PropTypes.func,
  activateMe: PropTypes.func.isRequired,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.array,
  ]).isRequired,
};

//using withRouter injects match, history and location objects from react router 4 into CustomMenuLink.
export default withRouter(CustomMenuLink);

Then I am using it like so:

<MetisMenu content={content} LinkComponent={CustomMenuLink} iconNamePrefix="" />

where

const content = [
        {
            icon: 'glyphicon glyphicon-chevron-right',
            label: 'Landing',
            to: '/Landing',
        },
        {
            icon: 'glyphicon glyphicon-chevron-right',
            label: 'Users',
            to: '/Users',
        },
        {
            icon: 'glyphicon glyphicon-chevron-right',
            label: 'Clients',
            content: [
                {
                    icon: 'glyphicon glyphicon-chevron-right',
                    label: 'Client 1',
                    to: '/Clients/1',
                },
                {
                    icon: 'glyphicon glyphicon-chevron-right',
                    label: 'Client 2',
                    to: '/Clients/2',
                },
               {
                    icon: 'glyphicon glyphicon-chevron-right',
                    label: 'Client 3',
                    to: '/Clients/3',
                },
                {
                    icon: 'glyphicon glyphicon-chevron-right',
                    label: 'Client 4',
                    to: '/Clients/5',
                }
            ],
        },
    ];

What do I need to do in order to keep the sub menus open? In this example that would be any of the Client sub menus (Clients/1, Clients/2, Clients/3, Clients/4).

[roblapp]

Never mind, I am an idiot. I simply needed to add the option activeLinkFromLocation. My apologies.

[H.Alper Tuna]

Don't mention it 😊
Thanks for your report. Even I didn't notice that it is not suitable for React Router 4 and I may update this extension soon.