Как вызвать компоненты другого представления в нем без перезагрузки в ReactJS?

Question

Я создаю меню, которое, когда вы нажимаете на элемент, вызывает другой компонент подменю и помещает его поверх текущего.Затем я оставляю свои компоненты:

Компонент меню (основной):

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = { currentIndex: 0 };
    this.shouldShowSubmenu = false;
  }

  onClick(value) {
    this.setState(prevState => ({ childVisible: !prevState.childVisible }));
    this.value = value;
    this.props.shouldHide = true;
    this.shouldShowSubmenu = true;

  }

  render() {
    return (
      <ul className={this.props.shouldHide ? 'hidden' : 'menuMobile'}>
            {this.shouldShowSubmenu === true ? <MobileSubMenu nameItem={this.value} /> : ''}

        <li>
          <NavLink to="/" exact>
            Home
          </NavLink>
        </li>
        <li>
          <NavLink
            onClick={() => this.onClick('America')}
            to="/America"
            exact>
            America
          </NavLink>
        </li>
        <li>
          <NavLink
            onClick={() => this.onClick('Settings')}
            to="/settings"
            exact>
            Settings
          </NavLink>
        </li>
        <li>
          <NavLink onClick={() => this.onClick('World')} to="/world" exact>
            World
          </NavLink>
        </li>
        <li>
          <NavLink to="/Grecy" exact>
            Grecy
          </NavLink>
        </li>
        <li>
          <NavLink to="/columns" exact>
            Columns
          </NavLink>
        </li>
        <li>
          <NavLink to="/Spain" exact>
            Spain
          </NavLink>
        </li>
      </ul>

    );
  }
}

И модуль с именем MobileSubMenu содержит другое меню, которое я хочу наложить на текущее, и все это без перезагрузки.страница:

Компонент подменю

    class MobileSubMenu extends Component {
      constructor(props) {
        super(props);
        this.state = { currentIndex: 0 };
        this.shouldShowSubmenu = false;
      }

      render() {
        return (
<div>
<h1>You select America!</h1>
          <ul className="submenu">
            <li>
              <NavLink
                to="/subamerica1"
                exact>
                Subitem America1
              </NavLink>
            </li>
            <li>
              <NavLink
                to="/subamerica2"
                exact>
              Subitem America2
              </NavLink>
            </li>
            </li>
          </ul>
    </h1>
        );
      }
    }

Как я могу сделать это без перезагрузки всей страницы?Когда вы вызываете его с помощью onclick, он перезагружает всю страницу и ничего не делает ...

Спасибо!