使用React显示登录或注销按钮

Question

我希望React的主页在用户未登录时显示“登录”和“注册”按钮，或者仅在用户登录时显示“注销”按钮。我也有标题和描述，但是我只希望在用户尚未登录时显示该标题。

我在auth.js中使用以下功能

  loggedIn() {
    const token = this.getToken();
    return !!token && !this.isTokenExpired(token);
  }

然后在我的Homepage.js上

import React from "react";
import "semantic-ui-css/semantic.min.css";
import { Container, Button, Grid } from "semantic-ui-react";
import { Link } from "react-router-dom";
import Auth from "../utils/auth";

export default function Homepage() {
  function showNavigation() {
    if (Auth.loggedIn()) {
      return (
        <Grid columns={2}>
          <Grid.Row>
            <Grid.Column>
              <Link to="/" onClick={() => Auth.logout()}>
                <Button.Group widths="2">
                  <Button >
                    Logout
                  </Button>
                </Button.Group>
              </Link>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      );
    } else {
      return (
        <>
          <Container text textAlign="center">
            <Grid columns={2}>
              <Grid.Row>
                <Grid.Column>
                  <Link to="/">
                    <Button.Group widths="2">
                      <Button>
                        Login
                      </Button>
                    </Button.Group>
                  </Link>
                </Grid.Column>
                <Grid.Column>
                  <Link to="/signup">
                    <Button.Group widths="2">
                      <Button>
                        Signup
                      </Button>
                    </Button.Group>
                  </Link>
                </Grid.Column>
              </Grid.Row>
            </Grid>
          </Container>
        </>
      );
    }
  }

  return (
    <>
    <Container
       as="h1"
       content="Title Here"/>
          
    <Container
       as="h2"
       content="description" />
          {showNavigation()}
   </>
  )
}

但是带有标题和说明的<Container>和登录/注册按钮出现了两次。如何正确重构呢？