首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

useRouter查询在getServerSideProps内部返回undefined

在Next.js中,我们可以使用useRouter钩子来获取当前页面的路由信息。但是在getServerSideProps函数内部使用useRouter钩子时,会返回undefined。

getServerSideProps是Next.js中用于在服务器端渲染(SSR)页面时获取数据的特殊函数。它在每个页面加载之前都会被调用,并且可以在服务器端获取数据并将其传递给页面的props。

由于getServerSideProps是在服务器端执行的,而useRouter是一个客户端的钩子函数,因此在getServerSideProps函数内部使用useRouter时,获取到的值将会是undefined。这是因为服务器端没有浏览器的上下文,所以无法获取到路由信息。

如果在getServerSideProps内部需要获取路由信息,可以通过在getServerSideProps的参数中获取路由参数来实现。例如:

代码语言:txt
复制
import { useRouter } from 'next/router';

export async function getServerSideProps(context) {
  const router = context.req.headers.host; // 通过context参数获取路由参数

  // 根据获取到的路由信息做一些操作

  return {
    props: {
      // 将获取到的数据传递给页面的props
    }
  }
}

需要注意的是,通过这种方式获取到的路由信息可能不够详细,可能只包含基本的路由路径等信息。如果需要更多的路由信息,可能需要自行处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Next.js 简明教程

router hook获取: import { useRouter } from 'next/router'; function About() { const router = useRouter...`getServerSideProps`(SSR)每次访问时请求数据 页面中export一个async的getServerSideProps方法,next就会在每次请求时候在服务端调用这个方法。...方法只会在服务端运行,每次请求都运行一边getServerSideProps方法 如果页面通过浏览器端Link组件导航而来,Next会向服务端发一个请求,然后在服务端运行getServerSideProps...getServerSideProps方法主要是升级了9.3之前的getInitialProps方法 9.3之前的getInitialProps方法有一个很大的缺陷是在浏览器中req和res对象会是undefined...使用getStaticProps方法在build阶段返回页面所需的数据。 如果是动态路由的页面,使用getStaticPaths方法来返回所有的路由参数,以及是否需要回落机制。

3K20

React 应用架构实战 0x3:构建和配置页面

# 渲染策略 Next.js 支持四种渲染策略: 客户端渲染 (CSR) 从服务端上加载初始内容,然后在客户端再获取额外的数据 服务端渲染 (SSR) 在服务端直接获取数据,将其注入到页面上,然后将生成的页面返回到客户端...但是,对于公开页面,最好启用服务器返回实际的页面以使搜索引擎更容易爬取和索引我们的页面,可以通过在服务器端呈现页面来实现这一点。...函数,该函数在服务端执行。...然而,它也有一些缺点: 如果 Layout 组件跟踪一些内部状态,当页面更改时会丢失它 页面会失去滚动位置 任何我们想要在最终返回之前返回的内容,也需要将其包装在 Layout 中 对于我们的应用程序,...一些 SSR 的缺点,主要包括: 需要更多的计算资源,这可能会影响服务器成本 较长的 getServerSideProps 执行时间可能会阻塞整个应用程序 因此,我们只希望在合适的情况下使用 SSR,比如需要对

82820
  • React 必学SSR框架——next.js

    router hook获取: import { useRouter } from 'next/router'; function About() { const router = useRouter...getServerSideProps(SSR)每次访问时请求数据 页面中export一个async的getServerSideProps方法,next就会在每次请求时候在服务端调用这个方法。...方法只会在服务端运行,每次请求都运行一遍getServerSideProps方法 如果页面通过浏览器端Link组件导航而来,Next会向服务端发一个请求,然后在服务端运行getServerSideProps...getServerSideProps方法主要是升级了9.3之前的getInitialProps方法 9.3之前的getInitialProps方法有一个很大的缺陷是在浏览器中req和res对象会是undefined...使用getStaticProps方法在build阶段返回页面所需的数据。 如果是动态路由的页面,使用getStaticPaths方法来返回所有的路由参数,以及是否需要回落机制。

    7.7K20

    React 应用架构实战 0x5:集成 API 到应用中

    它支持在浏览器和服务器端使用,并且具有创建实例、拦截请求和响应、取消请求等功能的 API。 我们首先要创建一个 Axios 实例,其中包含一些我们希望在每个请求上执行的通用操作。...对于每个查询,我们需要提供相应的查询键,用于将数据存储在缓存中。 这也有助于请求的去重。如果我们从多个地方调用相同的查询,它将确保 API 请求仅发生一次。...API 请求可以是查询或更新。 对于每个 API 请求,我们都将有一个文件,其中包含并导出 API 请求定义函数和用于在 React 中使用请求的 hook。.../types"; type GetJobsOptions = { params: { organizationId: string | undefined; }; }; export...API 层 之前为了在没有 API 功能的情况下构建 UI,我们在页面上使用了测试数据。

    1.6K20

    使用 NextJS 和 TailwindCSS 重构我的博客

    fallback: true //or false }; } 当网站构建后,新写的文章也需要生成静态页面,这时就可以将fallback 设置为 true, 如果设为 false,则在构建之外的文章都将返回...下面是文章详情页的主体代码 // pages/posts/[slug].js import { useRouter } from 'next/router' function Post({ post...}) { const router = useRouter() // 如果页面还没静态生成,则先显示下面的loading // 直到 `getStaticProps()`运行完成 if...然后,模型类的实例在运行时为应用程序的 CRUD 查询提供一个接口。...Prisma 是一种新的 ORM,它缓解了传统 ORM 的许多问题,例如: 模型实例的膨胀、业务与存储逻辑的混合、缺乏类型安全性或由延迟加载引起的不可预测查询。

    2.4K20

    使用 NextJS 和 TailwindCSS 重构我的个人博客

    fallback: true //or false }; } 当网站构建后,新写的文章也需要生成静态页面,这时就可以将fallback 设置为true, 如果设为false,则在构建之外的文章都将返回...下面是文章详情页的主体代码 // pages/posts/[slug].js import { useRouter } from 'next/router' function Post({ post...}) { const router = useRouter() // 如果页面还没静态生成,则先显示下面的loading // 直到 `getStaticProps()`运行完成 if...然后,模型类的实例在运行时为应用程序的 CRUD 查询提供一个接口。...Prisma 是一种新的 ORM,它缓解了传统 ORM 的许多问题,例如: 模型实例的膨胀、业务与存储逻辑的混合、缺乏类型安全性或由延迟加载引起的不可预测查询。

    2.7K20

    Next.js 中为什么 App Router 可能是未来,但 Pages Router 仍然重要?

    数据获取方法较为固定:主要依赖 getServerSideProps 和 getStaticProps,灵活性较低。...实战对比:博客页面实现 让我们通过一个简单的博客页面来对比这两种路由系统的实现方式: Pages Router 实现 // pages/posts/[id].js import { useRouter...} from 'next/router'; export default function Post({ post }) { const router = useRouter();...res.ok) return undefined; return res.json(); } export default async function Post({ params }) {...例如,在一个需要频繁更新的数据密集型应用中,App Router 的服务器组件让我能够在服务器端处理大部分数据逻辑,显著减少了传输到客户端的 JavaScript 数量,提升了应用的整体性能。

    30310

    从 Next.js 看企业级框架的 SSR 支持

    其中,完善的静态渲染/服务端渲染支持让 Next.js 在 React 生态中独树一帜 二.核心特性 ?...(根本不会进入客户端 bundle),返回的静态数据会传递给页面组件(上例中的Home)。...用户请求等着要 HTML),在此过程中有 3 种选择: fallback: false:不降级,命中尚未生成静态页面的路由直接 404 fallback: true:降级,命中尚未生成静态页面的路由先返回降级页面...实际上就是 SSR,渲染过程是阻塞的,只是完成之后会保留结果 HTML) 即结合路由(getStaticPaths)对尚未生成的页面进行降级,例如: // pages/index.js import { useRouter...} from 'next/router' function Post({ post }) { const router = useRouter() // 渲染降级页面 if (router.isFallback

    3.9K11

    MySql基础架构(sql查询语句在MySql内部具体是怎么执行的?)

    本篇文章通过 一条sql查询语句在mysql数据库中具体是怎么执行的? 来具体讲解mysql的基础架构。...讲解 mysql> select * from Student where ID=1; 上面一条简单的查询语句很简单,但我想好多开发者并不知道在MYSQL内部的执行过程。...key是查询的语句,value是查询到的值,这样的话查询缓存会直接把value值返回给客户端。查询语句如果步子查询缓存中,会正常往下执行,获取到新的查询结果后会被存入到查询缓存中。...开始执行的时候,要先判断一下你对这个表 Student 有没有执行查询的权限,如果没有,就会返回没有权限的错误,如下所示 (在工程实现上,如果命中查询缓存,会在查询缓存返回结果的时候,做权限验证。...执行器将上述遍历过程中所有满足条件的行组成的记录集作为结果集返回给客户端。 至此,这个语句就执行完成了。

    5.6K20

    梳理NextJS13两种路由下的不同渲染方式:SSG,ISR,SSR,RSC

    路由下,如果我们要开启SSR,需要实现getServerSideProps这个API,在请求页面的时候,提前获取到数据,然后传入组件中。...这两个方法 getStaticPaths:返回静态页面所有路由变量值的数组,假如使用的是[name]这个变量,就需要返回name的所有情况。...给一个标志位 fallback: true, }; } const PokemonName = ({ data, time }: any) => { const router = useRouter...在客户端,将 JavaScript 逻辑连接到服务端返回的 HTML(这就是“水合”)。 而以上每个步骤必须完成,才可以开始下一个步骤。...比如一个传统的博客页面采用 SSR 的方式使用 getServerSideProps 的方式渲染,那么就需要等 3 个接口全部返回才可以看到页面。

    1.9K31

    Vue3中 router 带来了哪些变化?

    router.getMatchedComponents 返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类,不是实例)。通常在服务端渲染的数据预加载时使用。...[{ aliasOf: undefined beforeEnter: undefined children: [] components: {default: {…}, other: {...rfc 主要提议及改进如下: 删除 tag prop - 使用作用域插槽代替 删除 event prop - 使用作用域插槽代替 增加 scoped-slot API 停止自动将 click 事件分配给内部锚点...page=2 因为它在比较中包括查询参数 ?page=2,所以当选择第二页面时,Bar 就不高亮显示了。 所以无论是「精确匹配」还是「包含匹配」都不能满足此需求。...} 源码中,useRouter 、 useRoute 通过 inject 注入对象实例,并以单个函数的方式暴露出去。 在应用程序中只需要通过命名导入的方式导入即可使用。

    3.1K50

    一起来学 next.js - getStaticProps、getStaticPaths 篇

    构建时 next.js 会将其构建为 html,并且还会构建一份 json 文件,存储 getStaticProps 的返回值,在访问时初次进入页面为该页面时会直接使用 html 内容,而非初次进入则会去请求该...开发时的 getStaticProps 需要注意的是,在开发时也就是 next dev 时,getStaticProps 会在每次页面访问时被请求,也就是和 getServerSideProps 行为基本一致...通过返回值生成相应的 html 和 json 文件 所以上述代码我们在 next build 时将会生成 10 个静态页面 [1-10].html 和 10 个 JSON 文件 [1-10].json,...和 getServerSideProps 需要注意 getStaticProps 和 getServerSideProps 无法混用,在 next.js 的定位中,getStaticProps 主要用于...SSG 场景,而 getServerSideProps 主要用于 SSR 场景,在同一页面中使用时将会提示:You can not use getStaticProps or getStaticPaths

    1.4K30
    领券