为什么我的nextjs路由器不返回查询参数？
Next.js 是一个流行的 React 框架，用于构建服务器渲染的应用程序。它提供了一种简单的方式来创建具有预渲染功能的单页应用程序。
在 Next.js 中，路由器默认情况下不会返回查询参数。这是因为 Next.js 的路由器使用了服务端渲染的技术，它会在服务器端预先渲染页面，并将最终的 HTML 内容发送给客户端。在这种情况下，查询参数通常被认为是客户端特定的数据，不应该影响服务器端的渲染结果。
如果你希望在 Next.js 中获取查询参数，有几种方法可以实现：
- 使用
useRouter钩子函数：Next.js 提供了一个名为useRouter的钩子函数，可以用于获取当前页面的路由信息，包括查询参数。你可以在组件中使用useRouter钩子函数来获取查询参数，并在需要的地方进行处理。 - 使用
useRouter钩子函数：Next.js 提供了一个名为useRouter的钩子函数，可以用于获取当前页面的路由信息，包括查询参数。你可以在组件中使用useRouter钩子函数来获取查询参数，并在需要的地方进行处理。 - 使用
getServerSideProps或getStaticProps：如果你需要在服务器端获取查询参数，可以使用 Next.js 提供的getServerSideProps或getStaticProps方法。这两个方法可以在服务器端预先获取数据，并将其作为属性传递给组件。 - 使用
getServerSideProps或getStaticProps：如果你需要在服务器端获取查询参数，可以使用 Next.js 提供的getServerSideProps或getStaticProps方法。这两个方法可以在服务器端预先获取数据，并将其作为属性传递给组件。 - 使用
getServerSideProps或getStaticProps：如果你需要在服务器端获取查询参数，可以使用 Next.js 提供的getServerSideProps或getStaticProps方法。这两个方法可以在服务器端预先获取数据，并将其作为属性传递给组件。
以上是获取查询参数的常见方法，根据你的具体需求选择适合的方法即可。关于 Next.js 的更多信息和使用方法，你可以参考腾讯云的 Next.js 相关产品和文档：
相关·内容
getStaticProps中的上下文未定义。如果我对上下文执行console.log操作，则会得到：{ locales: undefined, locale: undefined } 我需要网址里的信息...如果我在getServerSideProps上尝试同样的方法，它是有效的。我将apollo与nextjs结合使用，如下面的示例：https://github.com/vercel/next.js/tree/canary/examples/with-apollo export async function getStaticProps(context) {
const apoll
浏览 20提问于2020-10-22得票数 3
我试图在代码中使用get getServerSideProps，但由于无法传递router.query.itmid，所以我无法这样做。
export async function getServerSideProps() {
// Call an external API endpoint to get posts.
const router = useRouter();
var id = router.query.itmid;
// You can use any data fetching library
const res = await fetch("ht
浏览 3提问于2022-02-08得票数 4
回答已采纳
在Next.js 9.3中，我需要在初始渲染时访问查询，并将查询结果传递给next/head以更改页面的标题和描述。 我的组件正在从useRouter钩子获取查询。不幸的是，query对象在初始呈现时是{ amp: undefined }。在初始渲染之后，立即进行另一次渲染，它具有所有必需的细节。我开始使用这个变通方法检查路由是否准备好https://github.com/zeit/next.js/issues/8259#issuecomment-544912889，但这对next/head不起作用，因为值将是未定义的。 import React from 'react';
浏览 26提问于2020-05-03得票数 1
每次使用getServerSideProps和next.js呈现该组件时，我都试图使用next.js来获取查询。
export async function getServerSideProps(context) {
const { data } = await client.query({
query: GET_AUTHED_USER
})
return {
props: { user: data.getAuthedUser },
}
}
const Profile = ({ user }) => {
const router = useRo
浏览 8提问于2022-05-13得票数 1
我试图在Next.js中为我的Next.js页面创建一个逻辑，但我似乎不知道如何实现。
其想法是：
获取url (使用useRouter)
调用API (它是一个无头CMS)来获取文章的信息
呈现员额
我现在拥有的是：
[other imports ...]
import { useEffect, useRef, useState } from "react";
import { useRouter } from 'next/router'
const apikey = process.env.NEXT_PUBLIC_BUTTER_CMS_
浏览 5提问于2022-07-29得票数 0
1回答
NextJS页面刷新中丢失的查询
、、、、
当我刷新页面时，router.query.title就会消失。
从我所发现的情况来看，我必须使用getServerSideProps，但我不知道在getServerSideProps上输入什么。或者有什么办法可以做到？
编辑:我尝试了Yilmaz的解决方案，并删除了as={}，现在它开始工作了。但是现在没有使用as={}解决方案的查询链接太长了吗？
index.tsx
const Projects = () => {
const [projects, setProjects] = useState(data);
{projects.slice(0, loadMore).map(
浏览 2提问于2022-04-02得票数 1
回答已采纳
如果找不到代码query参数，我想将用户重定向到错误页面 import { useEffect } from 'react';
import { useRouter } from 'next/router';
export default function Home(props){
const router = useRouter();
useEffect(() => {
if(!props.code){
console.log('No code found');
router.push(
浏览 33提问于2021-04-19得票数 1
回答已采纳
我已经创建了一个简单的应用程序，我将数值menuApi.js传递给了catId.js，在不能传递catId值为26(即)之后，现在我在getServersideProps方法中传递了catId，但是不起作用。我错过了什么。
menuApi.js
import React, { Component } from 'react';
import { Grid, Image } from "semantic-ui-react";
import Link from 'next/link';
function MenuApi(props) {
r
浏览 1提问于2021-09-29得票数 1
我是Next.js新手，所以我创建了一个简单的新闻网站，这样我就可以通过以下途径阅读一篇文章：
/[category]/[article]
这是pages的结构
_pages
__[category]
____index.jsx
____[...all].jsx
我是[...all].jsx
export default function Article() {
const router = useRouter();
const { category, all } = router.query;
return (
<>
{category}/{al
浏览 2提问于2022-08-08得票数 1
回答已采纳
有没有一种方法可以让我们的加载状态类似于在client-side上获取数据时的加载状态 我想要加载状态的原因是有一些类似加载骨架的东西，例如react-loading-skeleton 在客户端，我们可以这样做： import useSWR from 'swr'
const fetcher = (url) => fetch(url).then((res) => res.json())
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if
浏览 36提问于2021-09-21得票数 4
我的环境: React.js + Next.js 我需要app.jsx上的查询参数 当我写下 console.log(1);
console.log(router); (= useRouter import from next/router)
console.log(2);
console.log(Router); (= Router import from next/router) Chrome控制台可以很好地打印查询，但在终端上- query是空的 1
ServerRouter {
route: '/',
pathname: '/',
quer
浏览 49提问于2021-05-10得票数 1
回答已采纳
1回答
我用Next.js 9.3.1创建了新的应用程序。
在支持SSR的旧应用程序中。我可以在HOC组件中(而不是在页面中)使用getInitialProps函数，这样我就可以从HOC组件中的服务器和页面中获取数据。像这样的
示例：
export default function withLayout(ComposedComponent) {
return class WithLayout extends Component {
static async getInitialProps(ctx) {
console.log("ctxlayout fire");
浏览 2提问于2020-03-23得票数 17
下面是我的函数，其中我使用了getServerSideProps()方法，并根据参数post_slug动态地从我的URL中获取数据。
// This gets called on every request
export async function getServerSideProps({ query }) {
const { post_slug } = query || {};
let url = API_URLS.POST.GET_POST_BY_SLUG;
url = url.replace(/#POST_SLUG#/g, post_slug);
const re
浏览 5提问于2020-08-03得票数 3
我有两个带有动态路由的页面(父页面和子页面)，并且我只想在子页面中调用getServerSideProps()。第一页，[Post].js import React from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import Index from './index'
const Post = ({ children, making }) => {
return (
<Index>
浏览 103提问于2021-06-16得票数 1
我想使用片段中的ID查询我的Supabase表，例如localhost:3000/book/1，然后在Next.js页面上显示有关该书的信息。
表
book/id.js
import { useRouter } from 'next/router'
import { getBook } from '@/utils/supabase-client';
export default function Book({bookJson}) {
const router = useRouter()
const { id } = router.query
浏览 1提问于2021-09-04得票数 17
回答已采纳
我尝试在Next.js + React + Apollo的基础上做测试SSR应用程序。但我不明白SSR是如何工作的。
我阅读了文档，我发现为了在第一次渲染时获得一些重要的数据，我们需要使用getStaticProps，函数调用的结果将被传递给我试图渲染的组件的道具。
依赖于这个道具，我可以渲染任何我想要的东西，例如我有下面的代码：
import React from "react";
import {GetServerSideProps, GetStaticProps} from "next";
const Home = (props) => {
r
浏览 0提问于2020-11-23得票数 0
我正在尝试使用react-query在下一个JS中获取getServerSideProps中的数据，但是我一直收到这个奇怪的错误：
Error: Error serializing `.dehydratedState.queries[0].state.data.config.adapter` returned from `getServerSideProps` in "/auth/google/callback".
Reason: `function` cannot be serialized as JSON. Please only return JSON serializa
浏览 10提问于2022-03-26得票数 0
回答已采纳
我要简单地说：
链接：http://localhost:3000/product/bioCloths?activeCategory=medium&id=0
文件路径：pages/product/[product].js。
预期：product: "bioCloths, activeCategory: "medium", id: "0"
getStaticProps在[product].js上的应用
const ProductDetails = (props) => {
console.log("initial props"
浏览 4提问于2020-10-01得票数 7
回答已采纳
3回答
我正在利用Next.js应用程序中的查询参数过滤API的结果。我希望使用useRouter()来使用相同的键推送多个不同的过滤器，因此我的查询params看起来可能如下：
?page=1&skill=html&skill=css&skill=js
我可以将每个参数传递给API请求。现在，当我试图添加一个技能参数时，我使用router.push来完成它，如下所示：
const router = useRouter();
const addFilter = (skill: string) => router.push({ query: { ...router.que
浏览 15提问于2022-03-02得票数 3
我想构建我的next.js文件，但是我发现了一个错误
./pages/city/city.js 21:20错误: React "useRouter“在函数"city”中被调用，它既不是function函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。名称必须以“使用”一词开头。反应钩/钩子规则
[city].js文件的代码是
import { useRouter } from 'next/router'
import Head from 'next/head'
import Link from 'next/li
浏览 6提问于2022-09-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
