React使用Context API搭配嵌套路由时跨路由状态重置问题求助

云原生阿岚

2026-10-3

问题根因

你遇到的状态重置问题核心原因是GuardedRoute的实现错误，导致Onboarding组件在每次路由跳转时被卸载后重新挂载，其内部包裹的OnboardingStore也随之重新初始化，所有状态回归初始值：

React Router v5 中，给Route的component属性传递内联匿名函数时，每次路由更新都会生成新的函数引用，React 会判定为组件类型发生变化，直接卸载旧组件、挂载新组件实例
次要问题：reducer中存在直接修改原状态对象的错误写法，可能引发额外的状态更新异常

解决方案

1. 修复`GuardedRoute`的组件渲染逻辑

不要使用component属性传递内联函数，改用render属性来渲染受保护的组件，render属性不会触发组件的卸载重挂载：

// 修改GuardedRoute中的Route部分
return (
    <Route
        {...rest}
        render={(props:any) => (
            isLoading ? ' Loading... ' : 
            (
            authenticatedUser?
           <Component {...props} />
            :
                <Redirect to={'/sign-in'} />
            )
        )}
    />
)

2. 修复Reducer的错误写法

禁止直接修改原state对象，所有状态更新都要返回全新的状态副本：

case actionsTypes.SET_ONBOARDING_SECTION_STATE:
  // 不要直接修改原state，返回新对象
  return {
    ...state,
    [action.payload.section]: {
      ...state[action.payload.section],
      state: action.payload.status
    }
  };