Компонент React не отображается одновременно

Question

У меня проблема с отображением моего подменю. Он не отображается сразу после обновления страницы, если он имеет более одной ссылки. Вы можете увидеть этот снимок экрана gif => после нажатия на Insights или Administration отображается первая ссылка подменю, а затем еще одна с некоторой задержкой. Сокращенный код моего HeaderContainer с меню ниже:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { NavLink, Link } from 'react-router-dom'
import { withRouter } from 'react-router'
import { Route, Switch } from 'react-router-dom'

const AdminSubmenu = () => {
    return (
        <nav className="secondary-nav">
            <NavLink to={ getRoutePath('administration.users') } activeClassName="is-active" data-text="Users">
                Users
            </NavLink>
            <NavLink to={ getRoutePath('administration.settings') } activeClassName="is-active" data-text="Settings">
                Settings
            </NavLink>
            <NavLink to={ getRoutePath('administration.data-landscape') } activeClassName="is-active" data-text="Data Landscape">
                Data Landscape
            </NavLink>
        </nav>
    )
}

class HeaderContainer extends Component {
    render() {
        return(
            <div className="header-container">
                <div className="primary">
                    <div className="wrapper">
                        <nav className="primary-nav">
                            <NavLink to={ getRoutePath('customers') } activeClassName="is-active">
                                Customers
                            </NavLink>
                            <NavLink to={ getRoutePath('segments') } activeClassName="is-active">
                                Segments
                            </NavLink>
                            <NavLink to={ getRoutePath('insights') } activeClassName="is-active">
                                Insights
                            </NavLink>
                            <NavLink to={ getRoutePath('administration') } activeClassName="is-active">
                                Administration
                            </NavLink>
                        </nav>
                    </div>
                </div>
                <div className="secondary">
                    <div className="wrapper">
                        <Switch>
                            <Route path={ getRoutePath('administration') } component={ AdminSubmenu } />
                            <Route exact path={ getRoutePath('segments') } component={ SegmentsListSubmenu } />
                            <Route path={ getRoutePath('segments.detail') } component={ SegmentDetailSubmenu } />
                            <Route path={ getRoutePath('insights') } component={ InsightsSubmenu } />
                            <Route exact path={ getRoutePath('customers') } component={ CustomersListSubmenu } />
                            <Route path={ getRoutePath('customers.detail') } component={ CustomerDetailSubmenu } />
                        </Switch>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(connect(mapStateToProps)(HeaderContainer))

Answer 1

Хорошо, это не была проблема React, она была вызвана этим кодом CSS в теге привязки подменю (ссылка) ... интересно: - /

transition: all 0.15s ease-out;

&.is-active, &:hover {
  font-weight: bold;
}

&:after {
  display: block;
  content: attr(data-text);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}