Next.js中useRouter获取Slug页面及头部组件条件式背景色配置问题与解决方案

我来帮你梳理下这两个问题的解决方法，你已经找到的关键点非常正确，咱们一步步说清楚：

1. 如何通过useRouter获取Slug页面的动态参数？ #

在Next.js中，针对/projects/project/[id]这类动态路由页面，你可以通过useRouter的query属性来获取slug值（也就是这里的id）：

• 先在组件中导入useRouter：import { useRouter } from 'next/router'
• 初始化router实例：const router = useRouter()
• 通过router.query.id拿到动态参数值

注意：客户端渲染时，组件初始挂载阶段router.query可能为空（路由信息还没加载完成），你可以配合useEffect或条件渲染处理，示例代码如下：

import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

const ProjectPage = () => {
  const router = useRouter()
  const [projectId, setProjectId] = useState<string | undefined>()

  useEffect(() => {
    if (router.query.id) {
      setProjectId(router.query.id as string)
    }
  }, [router.query])

  if (!projectId) {
    return <div>Loading...</div>
  }

  return <div>当前项目ID：{projectId}</div>
}

export default ProjectPage

2. 配置头部组件的条件样式（解决深色头部不生效的问题） #

你已经找到核心解决方案：把router.asPath替换为router.pathname，这里给你解释原因并附上完整实现代码：

问题根源 #

• router.asPath会包含完整URL路径，包括查询参数和哈希值（比如访问/projects/project/123时，asPath是/projects/project/123）
• router.pathname是路由的「模板路径」，也就是你在pages或app目录中定义的路由结构（比如访问/projects/project/123时，pathname是/projects/project/[id]）

你的DarkPages数组中定义的是模板路径"/projects/project/[id]"，用asPath匹配时，实际路径和数组中的模板不匹配，导致深色头部不生效；换成pathname就能准确匹配到动态路由的模板路径。

修改后的完整代码 #

layout.tsx

import { useRouter } from 'next/router'
import MainHeader from './header'
import Footer from './footer'
import MainContext from './context'

const Layout = ({ children, data }) => {
  // 定义需要深色头部的页面路径（包含动态路由模板）
  const DarkPages = [
    "/projects/project/[id]",
    "/",
    "/404"
  ];
  const router = useRouter();

  return (
    <MainContext.Provider value={data}>
      <MainHeader pages={DarkPages} />
      {children}
      <Footer />
    </MainContext.Provider>
  );
}

export default Layout

header.tsx

import { useRouter } from 'next/router'
import styles from './header.module.css'

const MainHeader = ({ pages }: { pages: string[] }) => {
  const router = useRouter();
  // 用router.pathname匹配数组中的模板路径
  const darkBG = pages.includes(router.pathname);

  return (
    <header 
      className={styles.nav} 
      style={{ backgroundColor: darkBG ? "#101010" : "#ffffff" }}
    >
      {/* 头部内容 */}
    </header>
  );
}

export default MainHeader

这样修改后，首页、404页面以及所有项目详情页面（/projects/project/[id]的任意实例）都会显示深色头部，其余页面显示白色头部，完全符合你的需求。

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