如何将 Button 放在 Tab 内，指示器将保留在正确的 Tab 内？

Question

如何在选项卡中放置按钮？如果我单击主页，它会进入带有正确行指示符的正确选项卡。但是，如果我单击“配置文件”，指示器将转到注销按钮。我如何更正此指示器将停留在正确选项卡上的位置？这就是我转到“配置文件”选项卡时的样子，指示器将直接转到“注销”按钮。

  const Header = (props) => {
  const { currentUser } = props;
  const [value, setValue] = React.useState(0);
  const [open, setOpen] = React.useState(false);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  // for the tab to stay on the correct path/page even if it was reloaded
  useEffect(() => {
    let path = window.location.pathname;
    if (path === "/" && value !== 0) setValue(0);
    else if (path === "/login" && value !== 1) setValue(1);
    else if (path === "/registration" && value !== 2) setValue(2);
    else if (path === "/profile" && value !== 2) setValue(2);
  }, [value]);


  const isMatch = useMediaQuery(theme.breakpoints.down("md"));

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };
  return (
    <div>
      <AppBar>
        {/*  */}
        <Toolbar
          variant="dense">
          {isMatch ? (
            <h1>
              <div>
                <MobileviewComponent />
              </div>
            </h1>
          ) : (
            <div>
              <Grid>
                <Tabs
                  value={value}
                  onChange={handleChange}
                >

                  {currentUser && (
                    <Tab
                      disableRipple
                      label="Homepage"
                      to="/"
                      component={Link}
                    />
                  )}
                  {currentUser && (
                    <Tab
                      disableRipple
                      label="Profile"
                      to="/profile"
                      component={Link}
                    />
                  )}
                  {currentUser && (
                    <Button color="inherit" onClick={handleClickOpen}>
                      Logout
                    </Button>
                  )}

                  {!currentUser && (
                    <Tab
                      disableRipple
                      label="Homepage"
                      to="/"
                      component={Link}
                    />
                  )}
                  {!currentUser && (
                    <Tab
                      disableRipple
                      label="Login"
                      to="/login"
                      component={Link}
                    />
                  )}
                </Tabs>
              </Grid>
            </div>
          )}
        </Toolbar>
      </AppBar>

    </div>
  );
};

Answer 1

您将 /registration 和 /profile 的状态设置为 2，因此当您单击 /profile 选项卡时，值设置为 2 并且我猜你是 material-ui 所以选项卡计数从 0 开始，因此 2 表示选项卡中的 3rd 项，那就是你的 logout按钮，因此突出显示

如何将 Button 放在 Tab 内，指示器将保留在正确的 Tab 内？

How do I put a Button inside a Tab where indicator will stay in the correct tab?

javascript

tabs

reactjs

material-ui