NextJS 如何让 router.push 不是浅路由

Question

我有一个搜索页面，当用户搜索某些东西时，例如椅子，它将使用router.push("/search-page/" + searchQuery);推送到路由/search-page/chairs ；

但是，出现的一个问题是，当用户在搜索页面内进行另一次搜索时，地址栏中 URL 中的查询会更新，但页面不会刷新，因此不会更新产品。 我试过router.push("/search-page/" + searchQuery, undefined, {shallow: false}); 试图强制 router.push 不浅，但这没有用。 我也试过

componentDidUpdate(prevProps){
  if(this.state.router.asPath != prevProps.router.asPath){
   updateProducts()
 }
}

检查组件何时更新，之前的 URL 不等于当前的 URL。 但是，这个 if 语句似乎也不起作用。 某些内容未正确更新。 由于我使用的是 NextJS，也许我可以对 getServerSideProps 做些什么？ 但我不太熟悉 getServerSideProps 或 getIntialProps 的工作原理。 或者也许有办法更新URL中的查询，然后强制刷新页面，如回调function。 谢谢

Answer 1

万一有人想知道，我设法通过使用 window.location

componentDidUpdate() {

  var str = window.location.pathname;
  var n = str.lastIndexOf('/');
  var result = str.substring(n + 1);
  if(result != this.state.searchQuery){//if the current URL doesn't match the URL stored in the state (which is the previous url before making a new search)
    //grab the query from the current URL, and update the searchQuery state with that query from the current URL
    this.updateProducts(result);
  }
}

在下面的代码中，当组件更新时，它使用 ZE83AED3DDF4667DEC0DAAAACB2BB3BE0BZ 从 window.location.pathname 获取查询参数。 Then it compares that query param from the window.location to query param from this.state.searchQuery , if they aren't the same, then update this.state.searchQuery with the param extracted from window.location.pathname, and call the function 根据用户输入更新产品。

Answer 2

我使用的一种方法是将返回的search query JSX包装在备忘录中，或者将其存储在更改时更新 state。 这是我几个月前建立的一个 subreddit 搜索项目的代码

@/components/Searchbar.tsx

.input {
    @apply bg-redditSearch px-3 pl-7 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10 text-gray-100 font-semibold;

    @screen sm {
        min-width: 300px;
        @apply text-lg;
    }
    @screen md {
        min-width: 600px;
        @apply text-lg;
    }
}

.input:focus {
    @apply outline-none text-gray-100;
}

.iconContainer {
    @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
}

.icon {
    @apply h-5 w-5;
}

对应@/components/Searchbar.module.css文件

.input { @apply bg-redditSearch px-3 pl-7 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10 text-gray-100 font-semibold; @screen sm { min-width: 300px; @apply text-lg; } @screen md { min-width: 600px; @apply text-lg; } }.input:focus { @apply outline-none text-gray-100; }.iconContainer { @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none; }.icon { @apply h-5 w-5; }

我在 useEffect 挂钩中预取目标路由，以增强生产环境中的 UX； 它也会增强开发中的用户体验，但预取目前仅适用于产品。

然后，有一个@/pages/api路由处理用户输入值，如下所示：

@/pages/api/snoosearch.ts

 import { Subreddit, Listing } from 'snoowrap'; import { NextApiRequest, NextApiResponse } from 'next'; import { r } from '@/lib/snoo-config'; export type SearchSubreddits = { subreddit: Listing<Subreddit> | never[]; found: boolean; }; export default async function ( req: NextApiRequest, res: NextApiResponse<SearchSubreddits> ) { const { q } = req.query; console.log(q); const data = q? await r.searchSubreddits({ query: (q as string)?? 'snowboarding', count: 10, limit: 3 }): []; res.statusCode = 200; res.setHeader( 'Cache-Control', 'public, s-maxage=1200, stale-while-revalidate=600' ); return res.status(200).json({ subreddit: data, found: true }); };

因此，这个 lambda 注入动态子目录的getStaticPaths来处理实时 static 路径生成（以及如果使用国际化路由，则可选本地化）并通过 ISR 填充任何给定 subreddit 的内容。

如果您必须在 typescript 环境中使用 Jest 在 Nextjs 中编写测试，您可能熟悉必须通过在测试环境中复制下一个路由器来模拟它。 这帮助我了解了很多关于路由器内部的知识：

TLDR - 提交用户搜索的搜索栏的记忆更新 state 强制非浅渲染应该可以解决您的问题

模拟 Nextjs 路由器

// Mocks useRouter type PrefetchOptions = { priority?: boolean; locale?: string | false; }; const useRouter = jest.spyOn( require('next/router'), 'useRouter' ); /** * mockNextUseRouter * Mocks the useRouter React hook from Next.js on a test-case by test-case basis */ export function mockNextUseRouter(props: { route: string; prefetch( url: string, asPath?: string, options?: PrefetchOptions ): Promise<void>; pathname: string; query: string; asPath: string; }) { useRouter.mockImplementationOnce(() => ({ route: props.route, prefetch: props.prefetch, pathname: props.pathname, query: props.query, asPath: props.asPath })); }