Next.JS useRouter将仅返回动态路径的空对象
Next.js是一个React框架，用于构建服务器渲染的React应用程序。它提供了许多功能和工具，使开发人员能够轻松构建现代化的Web应用程序。
useRouter是Next.js提供的一个React Hook，用于在页面组件中获取路由信息。它返回一个包含当前路由信息的对象，包括路由路径、查询参数和路由参数等。
在使用Next.js时，如果使用useRouter获取路由信息，当页面的路径是动态的（包含参数）时，useRouter将只返回一个空对象。这是因为在动态路径中，参数的值只能在实际的页面渲染过程中才能被解析和获取。
对于这种情况，可以通过在页面组件中使用getServerSideProps或getStaticProps来获取动态路径的参数值。这两个方法是Next.js提供的用于在服务器端获取数据的方法，可以在页面渲染之前获取参数值并将其作为props传递给页面组件。
关于Next.js useRouter的更多信息，可以参考腾讯云的Next.js官方文档： https://cloud.tencent.com/document/product/1243/47814
相关·内容
使用import { useRouter } from "next/router";作为import { useRouter } from "next/navigation";抛出“类型的参数”{路径名:字符串；查询：{搜索:字符串；}“不能分配给‘string’类型的参数。”
const router = useRouter();
const [searchInput, setSearchInput] = useState("");
const search = (e) => {
浏览 50提问于2022-11-13得票数 5
回答已采纳
1回答
对我来说，next.js教程https://github.com/zeit/next-learn-demo.git在阶段2“动态路由”之后的所有阶段都有一个问题。即使在之后的阶段，即阶段3到阶段8，动态路由应该已经在工作。 我认为问题在于文件.next/routing似乎丢失了。 因此，本教程要求实现代码： import { useRouter } from 'next/router'; 和 const router = useRouter(); 不做任何事情。 导致单击该链接时出现错误： screenshot of next.js browser syntax error
浏览 34提问于2019-10-11得票数 0
我在Next.js中使用动态路由器，这是代码
import { useRouter } from "next/router";
const exampleFunction = () => {
const router = useRouter();
const {slug} = router.query;
console.log(slug);
return (
<h1>{slug}</h1>
);
};
export default exampleFunction;
文件的位置是：
lms/client/pag
浏览 6提问于2021-07-06得票数 0
大家好，只有一个简单的问题，这是在Next.js中使用useRouter的正确方式吗？ const router = useRouter();
const route = router.query;
console.log(route.id) 当我像这样解构时，我得到了一个未定义的值。有人能告诉我为什么会这样吗？ const router = useRouter();
const {route} = router.query;
console.log(route)
浏览 106提问于2021-09-20得票数 1
根据Next.js documentation，我可以使用带有URL对象的路由器推送功能来路由动态路径，如下例所示： import { useRouter } from 'next/router'
export default function ReadMore({ post }) {
const router = useRouter()
return (
<span
onClick={() => {
router.push({
pathname: '/post/[pid]',
浏览 17提问于2020-10-02得票数 0
我的环境: 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
回答已采纳
我正在尝试学习Next.JS中的路由，但是我无法获得查询对象。
文件路径：./src/pages/[test]/index.tsx
import { useRouter } from 'next/router';
export default function Test() {
const router = useRouter();
console.log(router.query);
return (
<div>
<h1>Test</h1>
</div>
)
}
console.lo
浏览 3提问于2021-04-01得票数 4
回答已采纳
我正在迁移整个应用程序，从React到Next.js v12。我解决了大部分问题，但我在路由方面遇到了一些困难。
我用useHistory替换了useRouter，因为我们不再使用react路由器包了，我在页面上得到了最后的错误。
该位置应返回页面的当前URL
浏览 8提问于2022-04-14得票数 0
回答已采纳
3回答
我想知道我是否可以在用Next.js呈现页面之前重定向用户？ 现在我有这样的想法： import { useRouter } from 'next/router';
export default function RedirectPage() {
const router = useRouter();
router.push('/projects');
return (
<div><h1>hi</h1></div>
)
} 出现以下错误：Error: No ro
浏览 101提问于2021-03-21得票数 0
回答已采纳
我是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
回答已采纳
1回答
我正在使用Next.js 13中的实验性Next.js，在那里他们用next/navigation替换了next/router，因此我相应地导入了useRouter钩子。我没有在路由器中看到属性pathname，它确实存在于next/router的路由器中。
Property 'pathname' does not exist on type 'AppRouterInstance'
我的用例是突出显示用户当前所在的导航栏中的链接。这就是我试过的：
import Link from "next/link";
import { useRouter }
浏览 37提问于2022-11-26得票数 1
回答已采纳
我正在使用next/路由器动态地呈现一个帖子列表。此列表包含每个帖子的索引、路径和标题如下：
export const items = [
{
id: "0",
path: 'Post_Alpha',
title: "Title example 0",
},
{
id: "1",
path: 'Post_Beta',
title: "Title example 1",
},
我可以通过数组中
浏览 5提问于2020-11-30得票数 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
使用Next.js next/router会导致重新加载，还是会保留Redux状态？
import { useRouter } from 'next/router'
const DashboardSidebar = ({ mobile = false }: Props) => {
const router = useRouter()
router.push(
`/${lang}/dashboard/organizations/${organizationId}/events/${id}`
)
还是我应该用redux-persist来保留状
浏览 6提问于2022-05-11得票数 0
我正在查找用户是否直接进入我的next.js站点，并在其上使用查询参数。请注意，页面本身是动态的，因此它有内部的"param“。使用useRouter并不是“看到”附加的实际查询参数……
所以，我像这样进入我的网站:硬重新加载-=>
useRouter =>查询，只显示"1234“作为查询{id：'1234'}。路由器对象中没有discount_id或其值吗？
这好像是个虫子，不是吗？我得自己分析一下吗？
浏览 1提问于2022-01-06得票数 -1
回答已采纳
我第一次在NextJS中做一个项目，我想知道处理动态路由的正确方法是什么。
我有一个http://localhost:3000/trips路径，它显示一个包含卡片列表的页面，每个卡片代表一个“旅行”：
当我点击这些卡片之一时，我想导航到该路由的动态页面，比如http://localhost:3000/trips/0b68a50a-8377-4720-94b4-fabdabc12da1。
这是我的文件夹结构：
如您所见，我已经设置了动态路径，并且正在工作。
TripCard是卡组件。TripComponent是一个TripCards网格。trips/index.tsx包含Tr
浏览 10提问于2022-08-30得票数 0
回答已采纳
我对Next.JS商业框架感到烦躁不安。
为了接收正确的翻译，我必须在graphql请求中设置一个动态的接受语言头。路由和一切都很好，当我手动将头设置为es =西班牙语/es= english时，我得到了正确的翻译。
这是我的代码：
import type { GraphQLFetcher } from '@commerce/api'
import fetch from './fetch'
import { API_URL, API_TOKEN } from '../../const'
import { getError } from '
浏览 1提问于2021-05-18得票数 0
我正在用Next.JS制作一个专门的日历应用程序，我遇到了一些动态路由的问题，我似乎无法解决这些问题。我有两个相似的页面和相似的路由，其中一个工作得很好，而另一个根本不工作。 第一页(工作中)： // pages/date/[year]/[month]/[dayOfMonth].tsx
import { useRouter } from "next/router";
import { Day } from "../../../../components/Day";
type StringQueryParams = Record<keyof QueryP
浏览 5提问于2020-08-22得票数 3
1回答
我正在使用Next.js路由器来启用不同的仪表板，具体取决于URL段。当链接将信息传递到Next.js路由器时，当单击带有链接的按钮时，这会起作用，但当直接在浏览器中输入网址时，则不起作用(即，如果用户刷新页面，或者只是直接键入带有辅助代码的网址，则不起作用)。因此，虽然我可以在按下链接时使用动态路由，但如何在未按下链接时启用动态路由？ 相关代码如下。非常感谢 const dashboard = () => {
const router = useRouter();
const {dashboardID} = router.query;
return (
<
浏览 43提问于2021-10-15得票数 0
回答已采纳
3回答
我使用了Next.js，但是动态路由有一个错误。
在我的应用程序中，我使用了getStaticPaths，getStaticProps，如下所示：
<Link
href={`/offers/[id]?id=${offer.id}`}
as={`/offers/${offer.id}`}
>
<a>{offer.title}</a>
</Link>
当我点击这个链接时，我对显示我的页面的动态路由没有问题。
但是当我刷新相同的页面时，我会收到这样的消息：
当我寻找解决方案时，答案是我的Link在点击时没有正确的设置。
浏览 27提问于2021-03-26得票数 3
我使用Next.js导出静态页面，在像pages/[id].js这样的动态路由中，我放在getStaticPaths部分的任何路径都将被创建。凉爽的。
是否更好地列出每一页：
getStaticPaths(){
return (
// some function to spit out a list of every possible page
)
}
或
getStaticPaths(){
return (
// some function to return the next and previous page
)
}
或者这有关系吗？
浏览 93提问于2020-05-28得票数 4
回答已采纳
例如，我有URL。
我想把这些都弄成绳子。
'about'
'product'
'learn'
我试过了。顺便说一下，我用的是Next.js。
import { useRouter } from 'next/router'
const { asPath } = useRouter()
const result = asPath.substring(1).split('?')[0].split('#')[0].split('/')[0]
但是，是否有更好的方法来处理这些问题，如使
浏览 5提问于2021-07-07得票数 0
回答已采纳
我目前正在将一个Next.js项目从JavaScript迁移到TypeScript，并且我遇到了一个错误：Property 'className' does not exist on type '{ props: ReactNode; }'。在Javascript中，我可以从道具中提取className，但是typescript找不到类型。代码如下： import { useRouter } from 'next/router'
import Link from 'next/link'
import { ReactNode }
浏览 156提问于2021-10-14得票数 0
回答已采纳
尝试从index.js文件中显示博客组件中的标题道具。
当单击任何一个链接时，似乎都是空白的。
index.js
import Layout from "../components/MyLayout";
import Link from "next/link";
const PostLink = props => (
<li>
<Link href="/p/[id]" as={`/p/${props.id}`}>
<a>{props.id}</a>
</
浏览 2提问于2019-10-29得票数 0
回答已采纳
我在next.js中使用next.js
这是我的代码：
static getInitialProps( ctx ) {
console.log(ctx.isServer);
return{}
}
为什么我找不到isServer
浏览 1提问于2018-10-20得票数 1
回答已采纳
在阅读Routing中的Next.Js教程时，我了解了如何使用这2个libs获取数据。
从同构未取对象中提取对象，在getInitialProps异步函数中使用以调用外部API。然后，在路由API部分中，SWR和{ useRouter }来自‘next/路由器；形成对同一Next.Js服务器中开发的内部API的调用，具有很大的灵活性来查询req参数。
除了这两个方面之外，这两种方法还有哪些不同之处？
浏览 7提问于2020-02-05得票数 2
所以我有这个Next.js页面。我试图使用请求参数并在函数中使用它，但出于某种原因，它总是没有定义。我试过我所知道的一切。
我知道我不需要把id放在函数中。我尝试使用useEffect中的路由器，但不起作用。
这是我的密码：
import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import axios from 'axios';
export default function id () {
const [
浏览 1提问于2021-09-18得票数 1
所以，错误很简单，我是next.js新手，我需要访问localStorage，但我不能，问题看起来是这样的
我试着寻找答案，但是找不到，这是我目前为止的代码
import "../styles/globals.css";
import { useState } from "react";
import { AuthContext } from "../context/AuthContext";
import { useRouter } from "next/router";
function MyApp({ Comp
浏览 83提问于2021-05-18得票数 0
我在Next.js项目中有一个函数，为Firebase分析收集事件。
import analytics from '@utility/firebase';
const handleLogEvents = (event) => {
const currentDate = new Date();
logEvent(analytics, event.event_name, {
branch_slug: event.branch_slug,
timestamp: currentDate,
...event.properties,
});
};
浏览 9提问于2022-08-02得票数 0
回答已采纳
我知道在组件挂载之前，“窗口”或“文档”对象在React组件中是无法识别的。
我正在尝试制作一个下载按钮，从后端服务器接收处理过的excel文件。在我使用React之前，我经常这样实现.
<button onclick="download()">Download</button>
<script>
function download() {
const URL = 'http://dynamic-link.com/sample.xlsx'
window.
浏览 11提问于2021-08-05得票数 1
回答已采纳
我最近开始学习Next.js，并且遇到了一些奇怪的事情。我有一个简单的代码：
import {useRouter} from 'next/Router';
import {Profile} from '../../components/Profile';
const JobsListingPage = () => {
const Router = useRouter();
console.log(Router.query);
return (
<div>
<h1>J
浏览 10提问于2022-10-27得票数 0
我使用userouter获取当前页面的url，并使用剪贴板进行复制，但复制的内容是对象对象我希望它在代码中返回一个url.What问题。
import CopyToClipboard from "react-copy-to-clipboard";
import React,{ useState } from "react";
import { useRouter } from "next/dist/client/router";
const clip = () => {
const {asPath} = useRouter()
浏览 0提问于2021-11-26得票数 0
在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
我有一个网站，作为一个单一的网页，是使用Next.js。我在路由/的主页上显示了一个产品列表。此页的代码位于pages/index.js中。每个产品都有一个id，所以我可以使用/#product-id跳转到它。
为了使它更容易使用url，我使用product-id作为路径中的第二个参数来复制这种行为：/product-id。
我所做的只是简单地使用useRouter()查看useRouter()参数
const selectedProductId = useRouter().query['product-id']
然后使用js滚动到具有此id的元素。
document.getE
浏览 11提问于2020-05-30得票数 4
回答已采纳
我正在使用next.js构建一个英语-阿拉伯语应用程序，希望用户能够在这两种语言之间切换。
我从next.js：中找到了这个例子。它使用StylisRTLPlugin，它翻转所有的CSS样式以适应RTL布局：
// _document.js
<StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
<App {...props} />
</StyleSheetManager>
它工作得很好，但问题是我不能根据当前的stylisRTLPlugin locale有条件地删除us
浏览 2提问于2021-04-18得票数 2
回答已采纳
1回答
上下文
我正在与一个混合next.js和反应路由器应用程序工作。应用程序的一部分由react路由器(基于散列的)处理，部分由next.js路由器处理。有一些常见的组件使用与当前路由状态相关的钩子(例如useLocation)，如果缺少react路由器提供者包装器，这些组件就会崩溃。
问题
我想要编写一个钩子，返回useLocation (从react路由器-dom)或useRouter (从next.js)，这取决于它是否在当前上下文中检测到了react路由器提供者。
然后，我将在公共组件中使用这个钩子，这样不管它们在哪个上下文中使用，它们都能工作。
有一个类似的解决方案，用于检测是否使用us
浏览 2提问于2022-04-22得票数 1
我正在使用nextjs构建一个简单的应用程序。我的大多数组件都是功能组件。但是，我有一个处理表单的类组件。 我想在表单提交后重定向到主页。console.log(this.router)给出了未定义的。因为它是一个类组件，所以我不能使用useRouter()钩子。如何在next.js中获取对类中路由器组件的引用？
浏览 34提问于2021-01-22得票数 1
Next.js v12.2.5
尝试像这样的URL对象来添加查询param。这不管用。
是否有任何方法在中间件中添加查询param，可以在服务器端的useRouter()中使用？
// middleware.ts (conceptual example)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
return Nex
浏览 6提问于2022-09-07得票数 1
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
我的网址是：
我想通过使用router.query来获取id的值。然而，当我通过控制台登录router.query时，它首先返回一个空对象，然后返回包含数据的对象。这会导致代码的其他部分出现bug，因为我需要id的值来获取其他数据。
这是我的代码：
import { useRouter } from 'next/router';
import styles from './CompanyId.module.css';
import { useQuery } from '@apollo/client';
import { COMPANY
浏览 2提问于2021-01-18得票数 0
1回答
我有从strapi后端获取数据的nextjs前端。问题是，即使我可以在strapi dev日志上看到请求已经发出，数据也是空的。
这是next.js代码
import { useRouter } from "next/router";
import React, { useEffect } from "react";
const Room = () => {
const router = useRouter();
let fetchData;
useEffect(() => {
if (router.asPath !== ro
浏览 35提问于2021-02-23得票数 1
回答已采纳
我一直在尝试使用来自Next.js inside Storybook的useRouter钩子。然而，每次我加载Storybook时，我都会得到'cannot read property 'pathname‘of null’。我该如何解决这个问题？
import { useRouter } from "next/router";
const NavStrip = () => {
const router = useRouter();
return (
...
<Link href="/dashboar
浏览 31提问于2020-06-02得票数 6
1回答
所以我有一个小的Next.js应用程序，它的页面只允许登录用户。那里没什么特别的。为了管理经过身份验证的路由，我编写了一个临时的(称为withAuth)，用于在服务器上重定向，以避免页面在客户端上闪烁。到目前为止，它运行得很好，但我有一个问题，就是我的应用程序已经国际化了。因此，目前用户只被重定向到默认语言(英语)的登录，但我更愿意选择他们的语言。
不幸的是，useRouter()只能在客户机上使用，所以我的第一种方法没有成功(我应该更清楚地知道)。这是我的密码：
auth.tsx
import redirect from "../utils/redirect";
import
浏览 9提问于2021-03-27得票数 2
回答已采纳
尝试在Next.js和React中使用严格的类型记录
还存在这样的问题，即useQuery的返回数据是未定义的。因此，我应该使用useQuery提供数据，而不是null！分配给useState时的运算符
ESlint不喜欢非空类型断言。我知道我可以关掉它..。但我想做严格的类型检查，所以我不想避免这种情况。
我发现的一种方法是使用if语句执行空检查，但是React无法用if语句包装它.
有什么绝妙的方法吗？
我的代码是这样的
const Edit = () => {
const router = useRouter();
const { id } = router.que
浏览 2提问于2022-01-08得票数 0
回答已采纳
1回答
如何将url数据传递给另一个页面，我正在创建一个简单的组件，我想将href值发送到另一个页面，因为我需要发送动态值(即我添加了链接值来发送存储/页面)。我需要从这个链接得到数字值。你能不能解决这个问题？
MenuApi.js
import React, { Component } from 'react';
import { Grid, Image } from "semantic-ui-react";
import Link from 'next/link';
function MenuApi(props) {
return (
浏览 4提问于2021-09-28得票数 2
我正在构建一个Next.js应用程序，其中一些页面有页面路由，其中之一。为了适应这种情况，我使用了一个catch(即[...slug])并处理该页面本身上的路由。我的文件夹结构如下所示：
当这些路由按预期工作时，我遇到了一个问题，如果我在引用其中一个捕获-所有页面时，向Next.js链接组件包含一个" as“支柱，那么href就会中断，并且页面会刷新到"as”url。这是我的代码：
import { useRouter } from "next/router";
import Link from "next/link";
export
浏览 6提问于2022-05-21得票数 1
我在getStaticProps页面中使用Next.js。
export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
store.dispatch(getInfoRequest());
store.dispatch(END);
await store.sagaTask.toPromise()
});
这是一条动态的路线。A当我刷新页面时：
错误:动态SSG页面需要getStaticPaths，“/dates/[...info]”缺少。阅读更多：
为什么会发生这种错误？
浏览 8提问于2020-10-27得票数 1
1回答
我正在尝试在我的Next.js网站中添加一个功能，允许用户单击一个按钮来创建一个新的组，然后将他们重定向到一个“邀请成员”页面，该页面使用在URL中使用动态路由自动生成的group_id。我目前正在使用Next.js的路由器，但我觉得有一种更好(或更有效)的方法来做到这一点。JS (在export default function groups ()内)：
const [num, setNum] = useState("");
const router = useRouter()
const createGroup = async () => {
const { da
浏览 2提问于2021-11-22得票数 1
回答已采纳
3回答
我有文件名叫。[slug].js。
我想要做的是向这个动态路由添加查询参数，这是代码。
await router.replace({
pathname: `${router.pathname}`,
query: { coupon },
},
undefined,
{ shallow: true });
这可以很好地处理每个静态页面，但是在动态页面上，它给出了以下错误：
Error: The provided `href` (/home/[slug]?theme=dark) value is missi
浏览 4提问于2022-02-16得票数 1
回答已采纳
1回答
我正在用Next.js目录构建一个/app 13项目。我有一个问题--在根布局中，我有一个永久的导航条组件，其中组件是从/components/Navbar.jsx导入的。基本上在Navbar.jsx中，我希望能够访问url中的段塞参数，以便使用ex：localhost:3000/:slug，其中我想要段塞id。我已经为这种鼻涕虫定义了一个Next.js 13 page.jsx。但是如何在导航栏组件中获得弹状体id。我也不想使用window.location.pathname，因为当页面路由到不同的段塞时，它不会改变，只有在刷新时才会改变。
我已经尝试了旧的Next.js 12方法：
//
浏览 3提问于2022-11-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
