Why activeNameClass in react-router only changes after page refresh?

Question

React

This is what the sidebar looks like where clicks happen:

const sidebar = this.props.sidebar[0];
    const content = sidebar ? (
      Object.keys(sidebar).map(element => {
        const className = `icon ${sidebar[element].icon}`;
        const url = sidebar[element].url;
        return ( 
          <li key={element}>
            <NavLink to={url} activeClassName="active">
              <i className={className} />
              <span className="text">{sidebar[element].text}</span>
            </NavLink>
          </li>
        );
      })
    ) : (
      <div>Loading, please, waits</div>
    );

When I click, the routing happens. When I refresh the page, I get .activethe last clicked element. If I then click, nothing happens.
What could be the problem?