如何隐藏AWS Amplify Authenticator组件的默认标签页？

我之前也踩过这个坑！用hideSignUp={true}确实会直接把注册功能整个废掉，完全不是我们想要的“只隐藏标签、自己控制导航”的效果。下面给你两个实用的解决办法，按需选就行：

方法一：自定义组件，完全掌控布局（推荐深度定制） #

这个方法通过替换Authenticator的默认组件，彻底去掉标签栏，同时保留登录和注册的完整功能，还能自己定义切换按钮的样式和位置：

import { Authenticator, View, Button } from '@aws-amplify/ui-react';
import { useState } from 'react';
import '@aws-amplify/ui-react/styles.css';

function CustomAuthPage() {
  // 自己管理当前要显示的视图：登录或注册
  const [activeView, setActiveView] = useState('signIn');

  return (
    <Authenticator
      // 用我们自己的状态控制初始显示的视图
      initialState={activeView}
      components={{
        // 替换默认的头部，去掉自带的标签栏
        Header() {
          return (
            <View textAlign="center" padding="1.5rem">
              <h2>我的自定义登录页</h2>
            </View>
          );
        },
        // 自定义登录表单的底部，添加我们自己的注册切换按钮
        SignIn: ({ slots, ...rest }) => (
          <View {...rest}>
            {slots.default} {/* 保留Amplify默认的登录表单 */}
            <Button
              variation="link"
              onClick={() => setActiveView('signUp')}
              style={{ marginTop: '1rem', width: '100%' }}
            >
              还没有账户？立即注册
            </Button>
          </View>
        ),
        // 自定义注册表单的底部，添加我们自己的登录切换按钮
        SignUp: ({ slots, ...rest }) => (
          <View {...rest}>
            {slots.default} {/* 保留Amplify默认的注册表单 */}
            <Button
              variation="link"
              onClick={() => setActiveView('signIn')}
              style={{ marginTop: '1rem', width: '100%' }}
            >
              已有账户？返回登录
            </Button>
          </View>
        ),
      }}
    >
      {/* 认证成功后的内容 */}
      {({ signOut, user }) => (
        <div style={{ padding: '2rem', textAlign: 'center' }}>
          <h1>欢迎回来，{user.username}！</h1>
          <Button onClick={signOut} style={{ marginTop: '1rem' }}>退出登录</Button>
        </div>
      )}
    </Authenticator>
  );
}

export default CustomAuthPage;

这个方案的好处是你能完全控制页面的每一部分样式，切换逻辑也全在自己手里，不会和Amplify的默认逻辑冲突。

方法二：用CSS快速隐藏标签栏（适合快速需求） #

如果不想大改代码，只想快速把默认标签藏起来，然后自己加切换按钮，可以试试这个办法：

首先加一段CSS隐藏默认标签：

.amplify-tabs {
  display: none !important;
}

然后用Amplify提供的useAuthenticator钩子来实现视图切换：

import { Authenticator, useAuthenticator, Button } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

// 自定义的切换按钮组件
function AuthSwitcher() {
  const { toSignIn, toSignUp } = useAuthenticator();
  return (
    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', padding: '1rem' }}>
      <Button onClick={toSignIn}>登录</Button>
      <Button onClick={toSignUp}>注册</Button>
    </div>
  );
}

function App() {
  return (
    <div>
      <AuthSwitcher />
      <Authenticator>
        {({ signOut, user }) => (
          <div style={{ padding: '2rem', textAlign: 'center' }}>
            <h1>欢迎，{user.username}！</h1>
            <Button onClick={signOut}>退出登录</Button>
          </div>
        )}
      </Authenticator>
    </div>
  );
}

export default App;

注意：如果Amplify UI的类名后续有更新，你可以打开浏览器开发者工具，找到标签栏元素对应的类名，再调整CSS选择器就行。

内容来源于stack exchange