Next.js 路由器在第一次渲染时返回未定义的查询参数？

Question

我的 Next.js 应用中有一个页面，它执行以下操作：

• 这是一个搜索页面
• 路径名是这样的：/search?q=search+slug
• 在客户端加载数据
• 需要读取router.query才能得到router.query.q的值

PS：我正在使用 Redux

  const dispatch = useDispatch();
  const router = useRouter();
  const query = router.query as { q: string };
  const queryString = query.q;

  console.log("SEARCH CONTAINER");
  console.log(`queryString: ${queryString}`);

  useEffect(() => {
    dispatch(THUNK.LOAD(queryString));
    return () => { dispatch(ACTION.RESET_STATE()); };
  },[dispatch,queryString]);

请参阅useEffect。理论上每个queryString（实际上是req.query.q）应该只运行一次。

但我被重复了THUNK.LOAD 操作。这就是为什么我在那里添加了console.log()。

这就是它正在注销的内容：

然后：

这就是我收到重复调度的原因。当然，我可以在发送之前检查if (queryString)，或者我可以从window.location.search 获得它。但我很惊讶router.query.q 首先是undefined。这怎么可能呢？为什么req.query 对象会被异步填充？对此有何解释？

Answer 1

刚刚发现我的问题的解决方案是什么：

发件人：https://nextjs.org/docs/api-reference/next/router#router-object

isReady:boolean - 路由器字段是否更新 客户端并准备好使用。只能在内部使用 useEffect 方法，不适用于在服务器上进行条件渲染。

当您点击/search?q=XXX 时，客户端上的router.query 会发生这种情况。

第一次渲染

router.isReady: false
router.query: {}

后续渲染

router.isReady: true
router.query: {"q":"xxx"}

结论

router.query 在第一次运行时未填充到客户端（对于 SSG 页面）这一事实是设计实现细节。您可以通过检查 router.isReady 布尔属性来监控它是否已被填充。

Answer 2

这是因为 nextjs 在服务器端和客户端都工作，因此有必要通过执行typeof window !== 'undefined' 之类的操作来检查您实际上是在服务器端还是客户端上，因为该组件需要在客户端进行水合。

当你使用 useRouter 钩子时，它只在客户端运行，原因很明显，但是当 nextjs 将“组件”传递给浏览器时，它不知道 router.query.q 指的是什么，只有当组件在客户端获得水分，反应钩子启动，然后您可以检索queryString

这也类似于您需要使用dynamic 导入的原因 大多数客户端库的 nextjs 应用程序。

附：我自己是新的 nextjs，但我希望这是有道理的。

Answer 3

基于@cbdeveloper 的回答，这里是运行 NextJS 的示例代码，用于在客户端渲染期间获取路由器数据：

文件名：/pages/[...results].tsx

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function Results() {
  const router = useRouter();
  const { q } = router.query;

  const [searchQuery, setSearchQuery] = useState("");

  useEffect(() => {
    console.log(`useEffect triggered`);
    router.isReady ? setSearchQuery(q as string) : console.log('router is not ready');
  },[q]);

  return (
    <>
      <p>q: {router.query.q}</p>
      <p>searchQuery: {searchQuery}</p>
      <p>bar: {router.query.bar}</p>

      <form>
        <label>Search Query:</label>
        <input
          type="text"
          name="q"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

Answer 4

This solution 为我工作：

const router = useRouter();
React.useEffect(() => {
  if (router.isReady) {
    // Code using query
    console.log(router.query);
   }
}, [router.isReady]);