При обновлении страницы кнопки AppBar Material-UI переходят в центр экрана

Question

У меня есть панель приложения Material-UI:

import React from 'react'
import AppBar from 'material-ui/AppBar'
import AccountCircle from 'material-ui-icons/AccountCircle'
import Toolbar from 'material-ui/Toolbar'
import IconButton from 'material-ui/IconButton'
import HomeIcon from 'material-ui-icons/Home'
import Button from 'material-ui/Button'
import auth from './../auth/auth-helper'
import {Link, withRouter} from 'react-router-dom'

const isActive = (history, path) => {
  if (history.location.pathname == path)
    return {color: '#c61054'}
  else
    return {color: '#ffffff'}

}
const Menu = withRouter(({history}) => (
  <AppBar position="static">
    <Toolbar>
      <Link to="/">
        <IconButton aria-label="Home" style={isActive(history, "/")}>
          <HomeIcon/>
        </IconButton>
      </Link>
      {
        auth.isAuthenticated() && (<span style={{ marginLeft: "auto" }}>
          <Link to="/issues">
            <Button style={isActive(history, "/issues")}>Issues
            </Button>
          </Link>
          <Link to="/users">
            <Button style={isActive(history, "/users")}>Users
            </Button>
          </Link>
          <Link to="/signup">
            <Button style={isActive(history, "/signup")}>Create User
            </Button>
          </Link>
        </span>)
      } 
      {
        !auth.isAuthenticated() && (<span style={{ marginLeft: "auto", marginRight: -12 }}>
          <Link to="/signin">
            <Button style={isActive(history, "/signin")}>Sign In
            </Button>
          </Link>
        </span>)
      }
      {
        auth.isAuthenticated() && (<span  style={{ marginLeft: "auto", marginRight: -12 }}>
          <Link to={"/user/" + auth.isAuthenticated().user._id}>
            <IconButton aria-label="MyProfile" style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>
              <AccountCircle/>
            </IconButton>
          </Link>
          <Button color="inherit" onClick={() => {
              auth.signout(() => history.push('/'))
            }}>Sign Out</Button>
        </span>)
      }
    </Toolbar>
  </AppBar>
))

export default Menu

При выходе из системы все выглядит как положено.Значок Home находится слева, а SIGNIN справа:

Затем я вхожу и снова, все какхотел бы.Значок Home, ISSUES, USERS и CREATE USER находятся слева, а значок Profile и SIGNOUT - справа:

Если я затем обновлю страницу, ISSUES, USERS и CREATE USER перейдут в центр страницы:

Как мне предотвратить это?Должен ли я попробовать добавить какое-то условие в isActive, чтобы установить это?Возможно, я мог бы передать left или right в вызове функции и в зависимости от того, какой именно стиль можно установить на кнопке.Есть мысли по этому поводу?

Answer 1

Я думаю, что это связано с использованием поля слева от "auto".Вам не нужно никакого поля для аутентифицированного диапазона:

{
  auth.isAuthenticated() && (<span>
    <Link to="/issues">
      // ...existing code
    </Link>
  </span>)
}

Если вы хотите использовать поле для сдвига элемента влево, я думаю, это должно быть:

margin-right: "auto";

Answer 2

Чтобы избежать такого рода проблем с позиционированием, возможно, вы могли бы создать 2 span контейнера, один с опциями слева, а другой с опциями справа.Затем вы можете установить display: flex; и justify-content:space-between; для их родительского контейнера (в данном случае <Toolbar>), так что оба из span будут на противоположных сторонах.Что вы думаете об этом?