React路由无刷新跳转时页面组件状态重置问题如何解决？

根本原因 #

/catalog/order页面的isCodeDisabled是组件内部的局部状态，你通过路由跳转离开该页面时，页面组件会被React销毁，所有内部状态都会被清空。再次进入页面时组件会重新挂载，useState会用初始值false初始化，所以按钮会恢复为可点击状态，这是React组件生命周期的正常表现。

可选解决方案 #

方案1：状态提升（最推荐，无额外依赖） #

你提到的状态提升是性价比最高的方案，实现逻辑如下：

• 将isCodeDisabled状态定义在/catalog和/catalog/order的公共父组件中（公共父组件不会因为子路由切换被销毁，状态会持续保留）
• 通过props或React Router的useOutletContext将状态和修改状态的方法传递给/catalog/order页面组件

示例代码：

// 公共父组件（比如/catalog路由对应的父布局组件）
import { Outlet } from 'react-router-dom'
import { useState } from 'react'

const CatalogLayout = () => {
  const [isCodeDisabled, setCodeDisabled] = useState(false)
  // 把子路由需要的状态和方法通过context传递
  return <Outlet context={{ isCodeDisabled, setCodeDisabled }} />
}

// /catalog/order页面组件
import { useOutletContext } from 'react-router-dom'

const OrderPage = () => {
  const { isCodeDisabled, setCodeDisabled } = useOutletContext()
  const disableButton = () => {
    setCodeDisabled(true)
  }
  return <Button disabled={isCodeDisabled} onClick={disableButton}>Check</Button>
}

方案2：全局状态管理 #

如果你的项目已经接入了Redux、Zustand、Jotai等全局状态管理工具，可以直接把isCodeDisabled存入全局store，组件挂载时从全局store取值即可，不受组件销毁的影响。

以Zustand为例：

// 定义全局store
import { create } from 'zustand'

const useOrderStore = create((set) => ({
  isCodeDisabled: false,
  setCodeDisabled: (val) => set({ isCodeDisabled: val })
}))

// /catalog/order页面组件
const OrderPage = () => {
  const { isCodeDisabled, setCodeDisabled } = useOrderStore()
  const disableButton = () => setCodeDisabled(true)
  return <Button disabled={isCodeDisabled} onClick={disableButton}>Check</Button>
}

方案3：本地持久化存储 #

如果需要刷新浏览器后按钮依然保持禁用状态，可以把状态存在localStorage或sessionStorage中：

// /catalog/order页面组件
const OrderPage = () => {
  // 组件挂载时从localStorage读取初始化值
  const [isCodeDisabled, setCodeDisabled] = useState(
    () => JSON.parse(localStorage.getItem('codeDisabled')) ?? false
  )
  const disableButton = () => {
    setCodeDisabled(true)
    // 更新状态时同步写入localStorage
    localStorage.setItem('codeDisabled', JSON.stringify(true))
  }
  return <Button disabled={isCodeDisabled} onClick={disableButton}>Check</Button>
}

方案选择建议 #

• 仅当前路由相关模块需要该状态：优先选方案1，无需引入额外依赖，实现成本最低
• 项目已接入全局状态管理，且状态需要跨模块共享：选方案2
• 需要浏览器刷新后状态依然保留：选方案3

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