在Next.js中使用onClick进行router.push，获取数据并更新页面

Question

我是新手，尝试执行 GraphQL 查询，根据用户点击的链接更新页面上的

data

（检查下面代码中的两个

onClick

）。

当用户单击链接时，

handleSubmit

还应通过

router.push

更新 URL（更新后的 URL 应类似于：

http://localhost:3000/bonustype?=value

），而不刷新任何页面。但是，当我尝试使用

router.push

时，出现以下错误：

服务器错误 错误：找不到路由器实例。您应该只在应用程序的客户端内使用“next/router”。

单击链接并更新 URL 后，GraphQL 查询应使用更新的 slug（具有链接中的值）再次“执行”。

被这个问题困扰了几个小时，感谢任何帮助或意见。该代码来自我的主索引页面，运行时的当前网址是

localhost:3000/

。

你会如何解决这个问题？

import { useState } from "react";
import { useRouter } from "next/router";
import Layout from "../components/Layout";
import Head from "next/head";
import Featured from "../components/index/Featured";
import { API_URL } from "@/config/index";

import {
  ApolloClient,
  inMemoryCache,
  gql,
  InMemoryCache,
} from "@apollo/client";

export default function HomePage({ casinos }) {
  const router = useRouter();

  const handleSubmit = (value) => {
    console.log(value);
    router.push(`/bonustype?term=${value}`);
  };

  return (
    <div>
      <Layout>
        <div>
          <div className={featured.featuredMenu}>
            <ul>
              <li>
                <a href="#" value="Swish" onClick={handleSubmit()} className={featured.active}>
                  <Star className={featured.menuIcon} />

                  <div>Highest User Rating</div>
                </a>
              </li>

              <li>
                <a href="#" value="Swish" onClick={handleSubmit()}>
                  <TabletAndroid className={featured.menuIcon} />
                  <div>Casinos with Swish</div>
                </a>
              </li>
            </ul>
          </div>

          {casinos.map((casino) => (
            <Featured key={casino.id} casino={casino} />
          ))}
        </div>
      </Layout>
    </div>
  );
}

export async function getServerSideProps(context) {
  const slug = "Visa";
  console.log(slug);

  const client = new ApolloClient({
    uri: "http://localhost:1337/graphql",
    cache: new InMemoryCache(),
  });

  const { data } = await client.query({
    query: gql`
      query Casinos($slug: String) {
        casinos(where: { deposit_methods: { name: $slug } }) {
          slug
          name
          logo {
            url
          }
          rating
          owner
          founded
          bonuses {
            name
            slug
            title
            cashable
            bonus_type {
              name
            }
          }
          deposit_methods {
            name
            logo {
              url
            }
          }
        }
      }
    `,
    variables: {
      slug,
    },
  });

  return {
    props: {
      casinos: data.casinos,
    },
  };
}

Answer 1

这是错误的

onClick={handleSubmit()}

这是正确的

onClick={() => handleSubmit(`Swiss`)} 
// you need to supply the parameter to handleSubmit for each different call made  

然后更改句柄提交到下面

const handleSubmit = (value) => {
    console.log(value);
    router.push(`/bonustype?term=${value}`);
  };

Answer 2

使用

next/router

（当前实现）

您首先需要更新

onClick

回调，因为它们设置不正确。

onClick={() => handleSubmit('Swish')} 

在您的

handleSubmit

中，您可以使用

as

的

router.push

参数来更改浏览器上的可见 URL，同时仍停留在同一页面上。

const handleSubmit = (value) => {
    router.push(`/?term=${value}`, `/bonustype?term=${value}`);
};

使用

next/link

（替代）

或者，您不需要使用

onClick

和

next/router

进行路由 - 在这种情况下，使用

next/link

可能是更好的选择。您可以将

<a>

元素替换为以下内容，并且仍然具有相同的行为。

<Link href="/?term=Swish" as="/bonustype?term=Swish">
    <a className={featured.active}>
        <Star className={featured.menuIcon} />
        <div>Highest User Rating</div>
    </a>
</Link>

---

无论您使用上述哪种方式，都可以在

getServerSideProps

内检索URL中传递的查询参数。

export async function getServerSideProps({ query }) {
    const slug = query.term ?? "Visa"; // Defaults to `Visa` if no param is passed

    // Remaining logic...
}

Answer 3

您需要将以下语句放在客户端组件的文件顶部，因为它们只能包含在客户端捆绑包中。

“使用客户端”；