Next.js router.query 在刷新页面时未定义，但如果您从链接组件导航到它，则可以工作[重复]

JS

Next.JS是一个流行的React框架，用于构建快速且可扩展的Web应用程序。它提供了许多有用的功能，其中之一是内置的路由器。 Next.JS的路由器允许我们在应用程序中进行页面导航，并通过URL参数传递数据。

在使用Next.JS的路由器时，我们经常会遇到一个问题。当我们刷新页面时，页面的query参数会变为未定义。这是因为刷新页面会导致页面重新加载，并丢失原始的query参数。然而，如果我们通过链接组件导航到页面，query参数会被正确地传递和解析。

为了更好地理解这个问题，让我们来看一个示例代码。假设我们有一个名为"products"的页面，用于显示特定产品的详细信息。该页面的URL路径为/products?id=1，其中"id"是产品的唯一标识符。

Javascript
// pages/products.JS
import { useRouter } from 'next/router';
const ProductDetAIls = () => {
  const router = useRouter();
  const productId = router.query.id;
  return (
    <div>
      <h1>Product DetAIls</h1>
      
Product ID: {productId}
    </div>
  );
};
export default ProductDetAIls;

在上面的代码中，我们使用了Next.JS提供的useRouter钩子来获取路由器对象，并从中获取query参数。在这种情况下，我们获取了名为"id"的query参数，并将其显示在页面上。

然而，如果我们刷新页面/products?id=1，我们会发现router.query.id的值为未定义。这是因为刷新页面会导致页面重新加载，并丢失query参数。为了解决这个问题，我们可以使用useEffect钩子在页面加载时重新获取query参数。

Javascript
// pages/products.JS
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
const ProductDetAIls = () => {
  const router = useRouter();
  const [productId, setProductId] = useState(null);
  useEffect(() => {
    const id = router.query.id;
    setProductId(id);
  }, [router.query.id]);
  return (
    <div>
      <h1>Product DetAIls</h1>
      
<img src="https://img.izhida.com/topic/4ebb8701e4c1f14cd3df15f0d0790e89.jpg" alt="路由器"><br>路由器
Product ID: {productId}
    </div>
  );
};
export default ProductDetAIls;

在上面的代码中，我们使用了React的useEffect钩子来在页面加载时获取query参数，并将其存储在本地状态中。我们还使用了useState钩子来定义productId的初始状态为null。通过这种方式，我们可以避免在页面加载时显示未定义的值。

现在，当我们刷新页面/products?id=1时，router.query.id的值将被正确地获取并显示在页面上。

解决刷新页面未定义的问题

在上面的例子中，我们使用了useEffect钩子来解决刷新页面时query参数未定义的问题。通过在页面加载时重新获取query参数，并将其存储在本地状态中，我们可以在刷新页面时正确地显示query参数的值。

这种解决方案对于大多数情况来说是有效的，但在某些情况下可能会出现问题。例如，如果我们的页面使用了服务器端渲染，并且query参数在服务器端不可用，那么在刷新页面时仍然会出现未定义的问题。

为了解决这个问题，我们可以使用Next.JS的getServerSideProps函数在服务器端获取query参数，并将其作为props传递给页面组件。

Javascript
// pages/products.JS
import { useRouter } from 'next/router';
const ProductDetAIls = ({ productId }) => {
  const router = useRouter();
  return (
    <div>
      <h1>Product DetAIls</h1>
      
Product ID: {productId}
    </div>
  );
};
export async function getServerSideProps(context) {
  const { query } = context;
  const productId = query.id;
  return {
    props: {
      productId,
    },
  };
}
export default ProductDetAIls;

在上面的代码中，我们定义了一个名为getServerSideProps的异步函数，它接收一个context对象作为参数。通过context对象，我们可以访问到服务器端的query参数。在这种情况下，我们获取了名为"id"的query参数，并将其作为props传递给页面组件。

现在，当我们刷新页面/products?id=1时，productId将从服务器端获取，并正确地显示在页面上。

在本文中，我们讨论了Next.JS中的路由器query参数在刷新页面时未定义的问题，并提供了两种解决方案。第一种解决方案是使用useEffect钩子在页面加载时重新获取query参数，并将其存储在本地状态中。第二种解决方案是使用getServerSideProps函数在服务器端获取query参数，并将其作为props传递给页面组件。

无论哪种解决方案，我们都可以确保在刷新页面时正确地获取和显示query参数，从而提供更好的用户体验。