英文:
Prevent Sidebar from appearing in some page using Next.js
问题
login.jsx 文件中有一个小问题，我不希望在 login.jsx 页面上出现侧边栏，但我希望在所有其他页面上都出现。是否可以在其中添加某种条件？
_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;
要解决问题，你可以在 _app.js 中根据条件来决定是否呈现侧边栏。例如，你可以使用路由信息来检测当前页面是否为 "login"，如果是，则不呈现侧边栏，否则呈现侧边栏。以下是示例代码：
import '../styles/globals.css';
import Sidebar from '../components/Sidebar';
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }) {
const router = useRouter();
// 根据当前页面的路由判断是否显示侧边栏
const isLoginPage = router.pathname === '/login';
return (
{isLoginPage ? (
<Component {...pageProps} />
) : (
<Sidebar>
<Component {...pageProps} />
</Sidebar>
)}
);
}
export default MyApp;
这将根据当前页面的路由来决定是否在登录页面显示侧边栏。
英文:
I'm working on an application, and I have a minor issue with it. I have a sidebar appearing for my login.jsx page when I don't want it to appear for that specific page, though I want it to appear on all other pages. Is there some sort of conditional I can put in it?
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>
)
}
And this is the part that's giving the issues. My _app.js:
import '../styles/globals.css'
import Sidebar from '../components/Sidebar';
function MyApp({ Component, pageProps }) {
return (
<Sidebar>
<Component {...pageProps} />
</Sidebar>
);
}
export default MyApp
Here's my Sidebar.jsx component
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
I tried putting the Sidebar in different places in different files, but then unfortunately the formatting ended up being off.
答案1
得分: 1
在 `Sidebar` 组件中，你可以使用 [`useRouter`][1] 和一个 `if` 语句，类似于这样：
```react
import { useRouter } from "next/router";
export default function Sidebar({ children }) {
const { pathname } = useRouter();
// 如果路径是 "/login"，则渲染页面时不包含侧边栏
if (pathname === "/login") {
return children;
}
// 否则渲染页面时包含侧边栏
return <div>Sidebar {children}</div>;
}
在你的特定情况下，可以这样做：
import { useRouter } from "next/router";
const Sidebar = ({ children }) => {
const { pathname } = useRouter();
return (
<div className="flex">
{pathname !== "/login" && (
<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;
<details>
<summary>英文:</summary>
Inside the `Sidebar` component, you could use [`useRouter`][1] with an `if` statement, something like this:
```react
import { useRouter } from "next/router";
export default function Sidebar({ children }) {
const { pathname } = useRouter();
// render the page without the sidebar
if (pathname === "/login") {
return children;
}
// render the page with the sidebar
return <div>Sidebar {children}</div>;
}
In your specific case, it could be done like this:
import { useRouter } from "next/router";
const Sidebar = ({ children }) => {
const { pathname } = useRouter();
return (
<div className="flex">
{pathname !== "/login" && (
<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;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论