时间戳

首页 > 解决方案 > 使用onClick到router.push，在Next.js中获取数据和更新页面

reactjs - 使用onClick到router.push，在Next.js中获取数据和更新页面

问题描述

我是反应并尝试执行 GraphQL 查询的新手，data根据用户单击的链接在页面上更新（检查onClick下面代码中的两个 s）。

当用户点击一个链接时handleSubmit，还应该通过router.push（更新后的 URL 应该看起来像：）更新 URL http://localhost:3000/bonustype?=value，而不需要任何页面刷新。但是，当我尝试使用时router.push，出现以下错误：

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

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

坚持了几个小时，感谢任何帮助或输入。代码来自我的主索引页面，运行时的当前 url 是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,
    },
  };
}

标签： reactjsgraphqlnext.js

解决方案

这是错误的

onClick={handleSubmit()}

这是对的

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

THEN CHANGE handleSubmit to below

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

推荐阅读