next.js 如何将参数从url传递到下一个js中的_app. js文件中的getInitialProps方法

5t7ly7z5  于 2023-06-05  发布在  其他
关注(0)|答案(2)|浏览(171)

下面是MyApp的getInitialProps方法。

MyApp.getInitialProps = async ({ctx}) => {
    const { siteHeaderCollection } = await getHeaderData(ctx.query.lang)
    const { siteFooterCollection } = await getFooterData(ctx.query.lang)
    return {
        locale: ctx.query.lang,
        header: siteHeaderCollection,
        footer: siteFooterCollection,
    }
}

我需要将slug传递给这个getInitialProps方法。任何人都可以请指导如何通过从路径url获取的参数

hmtdttj4

hmtdttj41#

将slug作为参数传递给getInitialProps方法,如

MyApp.getInitialProps = async ({ ctx }) => {
    const { query: { lang, slug } } = ctx; // Retrieve the slug from the 
    query object

    // Fetch header and footer data using the slug
    const { siteHeaderCollection } = await getHeaderData(lang, slug);
    const { siteFooterCollection } = await getFooterData(lang, slug);

    return {
        locale: lang,
        header: siteHeaderCollection,
        footer: siteFooterCollection,
    };
};

在此代码片段中,slug是从ctx.query中提取的,假设slug参数作为URL路径的一部分传递。然后,您可以使用这个slug变量,通过getHeaderDatagetFooterData函数获取适当的页眉和页脚数据,并将langslug作为参数传递。
确保相应地更新getHeaderDatagetFooterData函数,以接受slug参数并根据slug值获取数据。

q3qa4bjr

q3qa4bjr2#

查看NextJS documentation,您可以发现以下内容:

getInitialProps是一个异步函数,可以添加到页面默认导出的React组件中。在页面转换期间,它将同时在服务器端和客户端运行。函数的结果将作为props转发给React组件。

这意味着,在getInitialProps函数中返回的任何内容都将作为props传递到该组件中。(在您的情况下,为localeheaderfooter

小提示getInitialProps是一个传统的API。NextJS建议使用getStaticPropsgetServerSideProps

您可以从上下文访问当前slug:

const { query: { lang, slug } } = ctx;

并将其添加到返回对象中

return {
        slug,
        locale: lang,
        header: siteHeaderCollection,
        footer: siteFooterCollection,
    }

相关问题