我有一个登录页面，其中包含3个角色登录。管理员，学生和公司，而不是改变整个页面，我只是想改变各自的角色登录组件。
登录页面

export default function Authpage(){

    return(
        <div className="authpagemain">
            <div className="authsection">
                <div className="logo">
                    <img src="https://res.cloudinary.com/dxi9wcchp/image/upload/v1661091025/quantum_olddxf.png" alt="" />
                </div>
                <div className="form-route">
                    <Studentlogin />
                    <span>
                <Link
                href="/">Admin</Link>
                <Link href="/">Student</Link>
                <Link href="/">Company</Link>
            </span>
                </div>
            </div>
        </div>
    )
}

学生登录组件

export function Studentlogin(){
    const [stemail, setStemail] = useState(String);
    const [stpassword, setStpassword] = useState(String);

    async function Login(e){
        e.preventDefault();
        const student = await pb.collection('users').authWithPassword(stemail, stpassword);
        console.log(student)
    }
    return(
        <form className="login-form">
            <h3>Student Login</h3>
            <input 
            className="login-email" 
            type="email" 
            placeholder="Enter Student Email" 
            onChange={(e)=> setStemail(e.target.value)}/>
            <input
            className="login-password"
            type="password" 
            placeholder="Enter Student Password" 
            onChange={(e)=> setStpassword(e.target.value)}/>
            <button
            onClick={Login} 
            className="login-btn">Login</button>
        </form>
    )
}

所以我有管理员和公司组件太。所以我如何设置路由这些不改变整个页面有什么办法吗？