Material-UI AppBar Buttons 页面刷新时跳转到屏幕中心答案

【问题标题】：Material-UI AppBar Buttons jump to center of screen when page is refreshedMaterial-UI AppBar Buttons 页面刷新时跳转到屏幕中心
【发布时间】：2019-10-07 12:12:27
【问题描述】：

我有这个 Material-UI AppBar：

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，并根据它的样式在按钮上设置。对此有什么想法吗？

【问题讨论】：

标签： javascript user-interface material-ui appbar

【解决方案1】：

我认为这是由于使用了“auto”的左边距。您不应该在经过身份验证的跨度上需要任何边距：

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

如果要使用margin将元素向左推，我认为应该是：

margin-right: "auto";

【讨论】：

【解决方案2】：

为了避免这种定位问题，您可以创建 2 个spancontainers，一个带有左侧选项，另一个带有右侧选项。然后您可以将display: flex; 和justify-content:space-between; 设置为它们的父容器（在本例中为<Toolbar>），因此span 将位于相反的两侧。你怎么看？

【讨论】：

谢谢，我试过了，但是有 2 个 span 容器似乎是个问题。