Next.js中如何通过点击页面跳转链接修改目标页面的state状态

场景描述 #

• 首页通过Link组件跳转至/about页
• 跳转完成后需要将about页的questionone状态从默认的false修改为true
• 相关代码：
  首页Link代码：

  <Link href="/about">
    <button>click to go to about page</button>
  </Link>
  

  about页默认state定义：

  const [questionone, setQuestionone] = useState(false)
  

实现方案 #

方案1：路由查询参数传参（最推荐，无额外依赖） #

通过跳转时在路由上携带标识参数，目标页读取参数后修改自身state，参数支持可选清除不留在地址栏。

Pages Router版本实现

首页修改Link写法：

<Link href={{
  pathname: '/about',
  query: { questionone: 'true' }
}}>
  <button>click to go to about page</button>
</Link>

about页逻辑：

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

const About = () => {
  const router = useRouter()
  const [questionone, setQuestionone] = useState(false)

  useEffect(() => {
    if(router.query.questionone === 'true') {
      setQuestionone(true)
      // 可选操作：清除地址栏参数，不保留跳转标识
      router.replace('/about', undefined, { shallow: true })
    }
  }, [router.query])

  // 页面其他逻辑
}
export default About

App Router版本实现

首页修改Link写法：

import Link from 'next/link'

export default function Home() {
  return (
    <Link href="/about?questionone=true">
      <button>click to go to about page</button>
    </Link>
  )
}

about页逻辑（需要标记为客户端组件）：

'use client'
import { useSearchParams, useRouter } from 'next/navigation'
import { useState, useEffect } from 'react'

export default function About() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const [questionone, setQuestionone] = useState(false)

  useEffect(() => {
    if(searchParams.get('questionone') === 'true') {
      setQuestionone(true)
      // 可选操作：清除地址栏参数
      router.replace('/about', { scroll: false })
    }
  }, [searchParams])

  // 页面其他逻辑
}

方案2：全局状态管理（适合状态需要跨页面共享的场景） #

如果不想参数出现在地址栏，且状态需要多页面复用，可以用React Context、Zustand、Redux等全局状态管理方案，以下是Zustand实现示例：
1. 新建全局状态store

// store/useGlobalStore.js
import { create } from 'zustand'

export const useGlobalStore = create((set) => ({
  questiononeJumpFlag: false,
  setQuestiononeJumpFlag: (val) => set({ questiononeJumpFlag: val })
}))

2. 首页跳转时修改全局状态

// 首页代码，App Router下需要加'use client'标记
import Link from 'next/link'
import { useGlobalStore } from '@/store/useGlobalStore'

export default function Home() {
  const setJumpFlag = useGlobalStore(state => state.setQuestiononeJumpFlag)
  return (
    <Link href="/about" onClick={() => setJumpFlag(true)}>
      <button>click to go to about page</button>
    </Link>
  )
}

3. about页消费全局状态修改自身state

// about页代码，App Router下需要加'use client'标记
'use client'
import { useGlobalStore } from '@/store/useGlobalStore'
import { useState, useEffect } from 'react'

export default function About() {
  const jumpFlag = useGlobalStore(state => state.questiononeJumpFlag)
  const [questionone, setQuestionone] = useState(false)

  useEffect(() => {
    if(jumpFlag) {
      setQuestionone(true)
      // 重置全局标识，避免下次进入about页误触发
      useGlobalStore.getState().setQuestiononeJumpFlag(false)
    }
  }, [jumpFlag])

  // 页面其他逻辑
}

方案3：本地存储（临时场景使用） #

如果是临时需求，也可以在首页点击跳转时往sessionStorage存入标识，about页读取后修改state再删除标识，缺点是用户直接访问about页可能会读取到旧值，需要做好异常判断和清理逻辑。

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