英文:
Nextjs _app layout is not persistent, it loads new on page change
问题
我已经创建了一个 _app.js 文件：
const MyApp = ({ Component, pageProps }) => {
const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>)
return getLayout(<Component {...pageProps} />)
}
export default MyApp
还有两个页面 about.js 和 works.js，它们只返回一个空的 div：
export default function Works(){
return(
<div></div>
)
}
我的默认布局定义如下：
const Layout = ({ children }) => {
return (
<div>
<Navbar/>
<main>{children}</main>
</div>
);
};
export default Layout;
但是当我尝试从 /works 导航到 /about 时，无论如何它都加载了导航栏（位于我的导航栏中）：
...
<div className={styles.item}><a href={'/about'}>about</a></div>
...
我正在使用 Next.js 13.2.3，但不知道为什么它不起作用 
我已经尝试过删除每个页面的布局并使用所有页面共享的布局，但结果相同，所以我又回到了每个页面的布局，因为我希望默认页面没有导航栏，而其他页面应该有一个。
StackOverflow 上的其他解决方案没有帮助，所以我正在尝试找出我的代码有什么问题。
英文:
i've created a _app.js:
const MyApp = ({Component, pageProps}) =\> {
const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>)
return getLayout(<Component {...pageProps} />)
}
export default MyApp
two pages about.js and works.js which just return an empty div:
export default function Works(){
return(
<div></div>
)
}
and my default layout is defined as the following:
const Layout = ({children}) => {
return (
<div>
<Navbar/>
<main>{children}</main>
</div>
);
};
export default Layout;
but whyever it also loads the Navbar when i try to navigate from /works to /about with (lies in my navbar):
...
<div className={styles.item}><a href={'/about'}>about</a></div>
...
I'm using next 13.2.3 and idk why it doesn't work
I already tried to remove the per-page layout and go with a shared layout for all the pages, but it had the same outcome - so i went back to my per-page, which i need because i want the default page without Navbar and all the other pages should have one.
Other solutions on StackOverflow didnt help, so i'm trying to figure out whats wrong with my code.
答案1
得分: 1
我找到了解决方案。我之前在页面之间的过渡中使用了<a>组件，但我应该使用next/link中的<Link> 
<div className={styles.item}><Link href={'/about'}>about</Link></div>
英文:
I found the solution. I was using <a> Components for my transition between pages, but i'm supposed to use <Link> from next/link
<div className={styles.item}><Link href={'/about'}>about</Link></div>
答案2
得分: 0
以下是您要翻译的代码部分：
在您的 _app.js 文件中粘贴以下代码：
import "@/styles/globals.css";
import MyLayout from "@/components/layouts/layout";
import Navbar from "@/components/Navbar/Navbar";
import Layout from "@/components/layouts/layout";
const MyApp = (props) => {
const { Component, pageProps } = props;
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
在您的 layout.js 文件中粘贴以下代码：
import React from "react";
import Navbar from "../Navbar/Navbar";
import Head from "next/head";
import { useRouter } from 'next/router';
const Layout = ({ children }) => {
const router = useRouter();
return (
<div>
{router.asPath === '/' ? null : <Navbar/>}
<main>{children}</main>
</div>
);
};
export default Layout;
这将在所有页面上呈现布局，除了 /about 页面。
PS：我不得不分别运行 npm i react-moment@1.1.3 来运行您的项目。
英文:
Copy below code to your _app.js file
import "@/styles/globals.css";
import MyLayout from "@/components/layouts/layout";
import Navbar from "@/components/Navbar/Navbar";
import Layout from "@/components/layouts/layout";
const MyApp = (props) => {
const { Component, pageProps } = props;
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp
Copy below code to your layout.js
import React from "react";
import Navbar from "../Navbar/Navbar";
import Head from "next/head";
import {useRouter} from 'next/router'
const Layout = ({children}) => {
const router = useRouter();
return (
<div>
{router.asPath === '/' ? null : <Navbar/>}
<main>{children}</main>
</div>
);
};
export default Layout;
This will render layout on all pages except /about page
PS: I had to seprately do ❯ npm i react-moment@1.1.3 to run you project
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论