刷新屏幕时，链接从AppBar的左侧移动到中心

Question

我有这个AppBar：

<AppBar position="static">
  <Toolbar>
    <Link to="/">
      <IconButton aria-label="Home" style={isActive(history, "/")}>
        <HomeIcon/>
      </IconButton>
    </Link>
    {
    !auth.isAuthenticated() && (<span style={{ marginLeft: "auto", marginRight: -12 }}>
        <Link to="/signin">
          <Button style={isActive(history, "/signin")}>Sign In
          </Button>
        </Link>
      </span>)
    }
    {
      auth.isAuthenticated() && (<span>
        <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={"/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>

当我未登录时，所有内容均应显示。 Home图标在左侧，Sign In在右侧：

如果我随后登录，一切都会按预期显示。 Home图标，Issues，Users和Create User链接都显示在左侧，而My profile图标和Log out链接显示在右侧：

即使我在不​​同的链接之间单击，它仍然像这样。但是，如果我通过单击浏览器中的刷新按钮或按F5来引用页面，则Issues，Users和Create User链接都移到中心：

如何防止这种情况？