路由器查询参数未定义，但仍可在HTML中显示

Question

我正在尝试编写一个页面，该页面从当前URL获取'name'查询参数，显示它，并在以后使用它进行API调用。

import { useRouter } from 'next/router';
function Map(){
const router = useRouter();
var name = router.query.name;
return (
<div>
<h1>{name}</h1>
</div>
);
};

页面在HTMI中正确显示了name参数，这意味着路由器查询正在工作，但每当我尝试在任何地方使用或打印变量时，它都会告诉我它未定义。我不明白为什么，特别是因为它已经在return语句中正确使用了。如果您对此有任何见解，我将不胜感激。

Answer 1

您可能需要为此使用useState。

import { useState, useEffect} from 'react';
import { useRouter } from 'next/router';
function Map(){
const router = useRouter();
var routerName = router.query.name;
const [name, setName] = useState(routerName);
useEffect(()=>{
setName(routerName);
}, [routerName] )
return (
<div>
<h1>{name}</h1>
</div>
);
};

Answer 2

使用react-router可以做到。在useEffect中写入逻辑

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
function useQuery() {
return new URLSearchParams(useLocation().search);
}
function Test() {
const param = useQuery().get("name");
const [name, setName] = useState(param);
useEffect(() => {
// Write logic here..
param && setName(param);
}, [param]);
return (
<div>
<h1>{name}</h1>
</div>
);
}
export default Test;

Answer 3

通常，您的函数是不正确的，但如果这对您有效。。！！执行以下步骤：

进口

import Router from 'next/router';

代替

import { useRouter } from 'next/router';

那么你的功能就像

function Map(){
var name = Router.router.query.name;
return (
<div>
<h1>{name}</h1>
</div>
);
};