nextjs服务端组件获取当前的页面路径

您所在的位置：网站首页 › 服务端组件 › nextjs服务端组件获取当前的页面路径

nextjs服务端组件获取当前的页面路径

2024-05-19 03:51| 来源: 网络整理| 查看: 265

Next.js 是一套基于 React 的服务器端渲染框架，为了能够更好的实现服务端渲染，我们会尽量使用服务端组件来编写，那么如何在服务端组件获取到当前页面的路径呢？我们可以通过中间件（middleware）来实现。

Middleware

Next.js 的中间件（Middleware）是一种允许在请求完成之前运行代码的功能，它可以根据传入的请求来修改请求或响应。所以我们可以通过中间件来实现，获取当前请求的路径，放到请求头（request）对象里，然后用 nextjs/headers 提供的 headers 方法来获取。具体实现方式如下：

// middleware.ts import { NextResponse } from 'next/server'; export function middleware(request: Request) { const reqHeaders = new Headers(request.headers); reqHeaders.set('x-request-url', request.url); return NextResponse.next({ request: { headers: reqHeaders, } }); }

服务端组件获取请求路径

import { headers } from 'next/headers'; export default function Nav() { const headersList = headers(); const header_url = headersList.get('x-request-url') || ""; }

这样就可以获取到当前页面的路径，不过由于是服务端组件，后续不会根据新的路径进行跳转，这是因为 Next.js 在首次访问后，后续的访问页面是客户端渲染。

本文为原创，未经授权，禁止任何媒体或个人自媒体转载商业侵权必究，如需授权请联系[email protected] 标签： Next.js

【本文地址】

nextjs服务端组件获取当前的页面路径

nextjs服务端组件获取当前的页面路径

今日新闻

推荐新闻