我正在开发一个应用程序，我遇到了一个小问题。当我不想让它出现在login.jsx页面时，它会出现在该页面的侧边栏中，尽管我想让它出现在所有其他页面上。是否有某种条件我可以放进去？
login.jsx:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Container from "@material-ui/core/Container";
import Button from "@material-ui/core/Button";
import { useForm } from "react-hook-form";
import { Magic } from "magic-sdk";
import Router from "next/Router";

export default function LoginPage() {
    const {
      register, 
      handleSubmit, 
      formState: { errors },
    } = useForm();
    const onSubmit = async ({email}) => 
    {
      console.log(email);
      const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);
      const didToken = await magic.auth.loginWithMagicLink({email})
      console.log(didToken)
      const res = await fetch("/api/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + didToken,
        }, 
        body: JSON.stringify({ email }),
      });
      if(res.status === 200) {
        // Redirect
        Router.push("/");
      } else {
        // Display an error
      }
    };

    return (
        <Container maxWidth="xs">
            <form onSubmit={handleSubmit(onSubmit)}>
              <h1>Hello and Welcome to the Enterprise Dashboard.</h1>
                <TextField 
                variant="outlined" 
                label="email" 
                fullWidth autoComplete="email" 
                autoFocus
                {...register("email", {required: "Required field", pattern: {
                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                  message: "Invalid email address",
                }})}
                error={!!errors?.email}
                helperText = {errors?.email ? errors.email.message : null}
                />
              <Button type ="submit" variant= "contained" color="primary" fullWidth>
                  Login/Sign Up
              </Button>
            </form>
        </Container>
    )
}

这就是问题所在。My _app.js：

import '../styles/globals.css'
import Sidebar from '../components/Sidebar';

function MyApp({ Component, pageProps }) {
  return (
      <Sidebar>
        <Component {...pageProps} />
      </Sidebar>
  );
}

export default MyApp

这是我的Sidebar.jsx组件

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import {RxSketchLogo, RxDashboard, RxPerson} from 'react-icons/rx'
import {FiSettings} from 'react-icons/fi';
import {HiOutlineShoppingBag} from 'react-icons/hi';
import {BiPackage} from 'react-icons/bi';
const Sidebar = ({children}) => {
    return (
        <div className='flex'>
            <div className='fixed w-20 h-screen p-4 bg-white border-r-[1px] flex flex-col justify-between'>
                <div className='flex flex-col items-center'>
                    <Link href='/'>
                        <div className='bg-blue-800 text-white p-3 rounded-lg inline-block'>
                            <RxSketchLogo size={20} />
                        </div>
                    </Link>
                    <span className='border-b-[1px] border-gray-200 w-full p-2'>
                    <Link href='/'>
                        <div className='bg-gray-100 hover:bg-gray-200 cursor-pointer my-4 p-3 rounded-lg inline-block'>
                                <RxDashboard size={20} />
                        </div>
                    </Link>
                    <Link href='/customers'>
                        <div className='bg-gray-100 hover:bg-gray-200 cursor-pointer my-4 p-3 rounded-lg inline-block'>
                                <RxPerson size={20} />
                        </div>
                    </Link>
                    <Link href='/orders'>
                        <div className='bg-gray-100 hover:bg-gray-200 cursor-pointer my-4 p-3 rounded-lg inline-block'>
                                <HiOutlineShoppingBag size={20} />
                        </div>
                    </Link>
                    <Link href='/products'>
                        <div className='bg-gray-100 hover:bg-gray-200 cursor-pointer my-4 p-3 rounded-lg inline-block'>
                                <BiPackage size={20} />
                        </div>
                    </Link>
                    <Link href='/'>
                        <div className='bg-gray-100 hover:bg-gray-200 cursor-pointer my-4 p-3 rounded-lg inline-block'>
                                <FiSettings size={20} />
                        </div>
                    </Link>
                    </span>
                </div>
            </div>
            <main className='ml-20 w-full'>{children}</main>
        </div>
    )
}
export default Sidebar

我试着把侧边栏放在不同文件的不同位置，但不幸的是格式最终被关闭了。