小编Jes*_*ton的帖子

我正在构建 Next.js 应用程序，我需要向我的 Prismic API 服务器端请求导航内容，获取结果，并将它们传递给我的Header组件，以便我可以拥有持久的导航菜单。我不想在每个页面组件中包含标题，也不想在每个页面中查询文档。

有没有一种方法可以让我在我的内部访问getServerSideProps、getStaticProps或 ，以便我可以拥有持久的导航？getInitialProps_app.js

这是我的_app组件、Prismic 客户端和index页面组件，因此您可以了解我正在使用的代码。

_app.js

import React from 'react';

import { AppLayout } from 'components/app-layout/AppLayout';
import { client } from 'lib/prismic';
import { GetServerSideProps } from 'next';
import { AppProps } from 'next/app';

interface WithNavProps extends AppProps {
  navigation: any;
}

const App = ({ Component, pageProps }: WithNavProps) => {
  return (
    <AppLayout>
      <Header />
      <Component {...pageProps} />
    </AppLayout>
  );
}; …

我正在使用 Next.js 应用程序中的查询参数过滤来自 API 的结果。我想使用useRouter()相同的键推送多个不同的过滤器，因此我的查询参数可能如下所示：

?page=1&skill=html&skill=css&skill=js

我可以将每个参数传递给我的 API 请求。现在，当我尝试添加技能参数时，我正在使用router.push它，如下所示：

const router = useRouter();

const addFilter = (skill: string) => router.push({ query: { ...router.query, skill: skill.toLowerCase() } });

但显然它会覆盖之前的技能，所以我只能在 URL 中获得其中一个技能。如何使用相同的键添加其他查询参数，最好使用useRouter()or next/router？