Как правильно использовать JSX?

Question

[d2207]

В моем приложении React использую простой JSX, но поведение странное. Первые 3 Linkвыглядят правильно, но последние 3 всегда меняют display: none то есть они "скачут". Никаких ошибок, это похоже как будто React DOM постоянно сравнивает элемент и обновляет его . Я не понимаю, что происходит.

render() {
        const { currentUser } = this.state;

        return (
            <div>
                <Layout>
                    <Header style={{position: 'fixed', zIndex: 1, width: '100%'}}>
                        <Menu theme="dark" mode="horizontal">
                            <Menu.Item>
                                <Link to="/">Grid</Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/charts">Charts</Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/onlineCharts">Online charts</Link>
                            </Menu.Item>
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/profile">{currentUser.username}</Link>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <a href="/" onClick={this.logOut}>*/}
                            {/*        LogOut*/}
                            {/*    </a>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/login">Login</Link>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/register">Register</Link>*/}
                            {/*</Menu.Item>*/}
                                {currentUser ? (
                                    <div>
                                        <Menu.Item>
                                            <Link to="/profile">{currentUser.username}</Link>
                                        </Menu.Item>
                                        <Menu.Item>
                                            <a href="/" onClick={this.logOut}>
                                                LogOut
                                            </a>
                                        </Menu.Item>
                                    </div>
                                ) : (
                                    <div>
                                        <Menu.Item>
                                            <Link to="/login">Login</Link>
                                        </Menu.Item>
                                        <Menu.Item>
                                            <Link to="/register">Register</Link>
                                        </Menu.Item>
                                    </div>
                                )}
                        </Menu>
                    </Header>
                </Layout>
            </div>
        )
    }
}

Comments

[Назарий Лазарчук]

Возможно проблема не в Link а в ?
Код вроде правильный
Возможно где-то currentUser меняется, тоже не исключено

[Daniil]

Тут не в реакте проблема. Лучше выложите в песочницу, проще рассмотреть проблему будет

[d2207]

Daniil, Компонент
проверка юзера
то есть если в хранилище нет юзера то у навбаре мы видим ссылки на логин и регистрацию

[d2207]

Daniil, ссылки которые находятся в условном операторе даже сохранили свою работоспособность, но они отображаются некорректно