Next.js组件内路由实现多角色登录组件切换方案

方案一：使用URL查询参数（简单快捷） #

实现步骤 #

• 在Authpage组件中导入useRouter钩子和三个登录组件
• 通过router.query获取当前角色参数
• 根据参数动态渲染对应登录组件
• 更新导航链接，带上角色查询参数

修改后的Authpage代码 #

import { useRouter } from 'next/router';
import Link from 'next/link';
import { Studentlogin } from './Studentlogin';
import { Adminlogin } from './Adminlogin';
import { Companylogin } from './Companylogin';

export default function Authpage(){
  const router = useRouter();
  // 获取URL中的role参数，默认显示学生登录
  const currentRole = router.query.role || 'student';

  // 匹配对应登录组件
  const renderLoginForm = () => {
    switch(currentRole) {
      case 'admin':
        return <Adminlogin />;
      case 'company':
        return <Companylogin />;
      default:
        return <Studentlogin />;
    }
  };

  return(
      <div className="authpagemain">
          <div className="authsection">
              <div className="logo">
                  <img src="https://res.cloudinary.com/dxi9wcchp/image/upload/v1661091025/quantum_olddxf.png" alt="平台Logo" />
              </div>
              <div className="form-route">
                  {renderLoginForm()}
                  <span>
                    <Link href="/authpage?role=admin">Admin</Link>
                    <Link href="/authpage?role=student">Student</Link>
                    <Link href="/authpage?role=company">Company</Link>
                  </span>
              </div>
          </div>
      </div>
  )
}

方案二：使用动态路由（URL语义化更强） #

实现步骤 #

• 创建动态路由文件 pages/login/[role].js
• 在动态页面中通过router.query.role获取角色参数
• 动态渲染对应登录组件
• 创建默认重定向页面 pages/login.js，访问/login时自动跳转到学生登录页
• 更新导航链接为动态路由地址

动态路由页面代码（pages/login/[role].js） #

import { useRouter } from 'next/router';
import Link from 'next/link';
import { Studentlogin } from '../../components/Studentlogin';
import { Adminlogin } from '../../components/Adminlogin';
import { Companylogin } from '../../components/Companylogin';

export default function LoginPage(){
  const router = useRouter();
  const { role } = router.query;

  // 处理无效角色参数，重定向到学生登录页
  if (!['admin', 'student', 'company'].includes(role)) {
    router.push('/login/student');
    return null;
  }

  // 匹配对应登录组件
  const renderLoginForm = () => {
    switch(role) {
      case 'admin':
        return <Adminlogin />;
      case 'company':
        return <Companylogin />;
      case 'student':
        return <Studentlogin />;
    }
  };

  return(
      <div className="authpagemain">
          <div className="authsection">
              <div className="logo">
                  <img src="https://res.cloudinary.com/dxi9wcchp/image/upload/v1661091025/quantum_olddxf.png" alt="平台Logo" />
              </div>
              <div className="form-route">
                  {renderLoginForm()}
                  <span>
                    <Link href="/login/admin">Admin</Link>
                    <Link href="/login/student">Student</Link>
                    <Link href="/login/company">Company</Link>
                  </span>
              </div>
          </div>
      </div>
  )
}

默认重定向页面代码（pages/login.js） #

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function LoginRedirect() {
  const router = useRouter();

  useEffect(() => {
    // 访问/login时自动跳转到学生登录页
    router.push('/login/student');
  }, [router]);

  return null;
}

额外优化点 #

原Studentlogin组件中useState初始化存在问题，应将构造函数String改为空字符串，避免潜在类型问题：

// 原代码
const [stemail, setStemail] = useState(String);
const [stpassword, setStpassword] = useState(String);

// 修改后
const [stemail, setStemail] = useState('');
const [stpassword, setStpassword] = useState('');

内容的提问来源于stack exchange，提问作者Dastagir Shaikh