Nextjs路由器查询参数未记录答案

【问题标题】：Nextjs router query parameters not loggingNextjs路由器查询参数未记录
【发布时间】：2021-07-27 18:23:33
【问题描述】：

我正在尝试在 Nextjs 项目中记录查询参数。我从未看到记录的值，但该值显示在页面上。我应该忽略npm dev 中的日志不显示查询参数还是应该处理它未定义的情况？

/pages/test/[test].js

import {useRouter} from "next/router";
import React from "react";

const Test = () => {
    const router = useRouter();
    const {test} = router.query;
    console.log(router.query); // {}
    console.log(test);  // undefined
    return <div>
        <h1>{test}</h1>
    </div>
};
export default Test;

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

您需要使用带有 2 个依赖项的 useEffect：

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

const Test = () => {
    const router = useRouter();
    const [query, setQuery] = useState(null);

    useEffect(()=>{
      setQuery(router.query)
      if (query){
        console.log(query); 
        console.log(query.test);
      } 
    },[router,query])
    
    return <div>
        <h1>{query && query.test}</h1>
    </div>
};
export default Test;

或有一个依赖项：

import {useRouter} from "next/router";
import React, {useEffect} from "react";

const Test = () => {
    const router = useRouter();

    useEffect(()=>{
      if (router.query){
        console.log(router.query); 
        console.log(router.query.test);
      } 
    },[router])
    
    return <div>
        <h1>{router && router.query && router.query.test}</h1>
    </div>
};
export default Test;

当您使用 useEffect 时，您确定路由器已经被调整过。

【讨论】：