Next.js中React服务组件URL路径获取及路由重定向问题

先解释原React Router代码的困惑 #

你看到的这段React Router代码：

<Route exact path={`/`}>
  <Redirect to={`${path}/user/:userId/pages/:pageId`} />
</Route>

其中的:userId和:pageId是路由参数的占位符语法，但这里直接写在重定向路径里是无效的——React Router不会自动填充这些占位符的实际值，必须传入具体的变量。你觉得用{userId}（模板字符串变量）的写法更合理，这是完全正确的，需要把获取到的userId和pageId变量注入到路径中。

Next.js正确实现方式 #

你的核心需求是把根路径/重定向到/user/[userId]/pages/[pageId]，下面分几种场景给出正确代码：

1. 客户端布局组件中处理（App Router） #

如果你的DashboardLayout是客户端组件（带交互逻辑），用usePathname获取当前路径，结合useEffect执行重定向：

'use client';

import { usePathname, redirect } from 'next/navigation';
import { useEffect } from 'react';

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { userId, pageId } = getStuff(); // 替换为你获取userId/pageId的实际逻辑

  useEffect(() => {
    if (pathname === '/') {
      // 注意模板字符串用反引号，变量用${}包裹
      redirect(`/user/${userId}/pages/${pageId}`);
    }
  }, [pathname, userId, pageId]);

  return <div>{children}</div>;
}

2. 服务器布局组件中处理（App Router） #

如果是服务器组件，可直接在渲染阶段判断并执行重定向，通过headers获取当前路径：

import { redirect } from 'next/navigation';
import { headers } from 'next/headers';

export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  const headersList = headers();
  const currentUrl = headersList.get('x-nextjs-url') || '';
  const pathname = new URL(currentUrl).pathname;
  
  // 如果getStuff是异步函数，需要加await
  const { userId, pageId } = getStuff();

  if (pathname === '/') {
    redirect(`/user/${userId}/pages/${pageId}`);
  }

  return <div>{children}</div>;
}

3. 全局Middleware处理（推荐） #

如果所有访问根路径的请求都需要重定向，用Middleware更高效，无需在组件中处理：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  if (pathname === '/') {
    // 替换为你获取userId/pageId的实际逻辑，比如从Cookie、数据库读取
    const { userId, pageId } = await getStuff();
    const targetUrl = new URL(`/user/${userId}/pages/${pageId}`, request.url);
    return NextResponse.redirect(targetUrl);
  }

  return NextResponse.next();
}

// 只匹配根路径
export const config = {
  matcher: '/',
};

你原代码的错误点修正 #

1. 模板字符串变量语法错误：应该用${userId}而非{userId}，后者会被当作普通字符串。
2. 布局组件无法直接获取request props：App Router的布局组件默认不提供该参数，需通过usePathname（客户端）或headers（服务器）获取路径信息。
3. 路径判断错误：根路径是/，不是空字符串""。

内容的提问来源于stack exchange，提问作者reactor