React Router v6 Outlet内useEffect路由切换不触发问题咨询

相关代码 #

父组件代码 #

<Main  props... >
  <LinksArray />
  <Outlet context={investorId}/>
</Main>

Outlet渲染的子路由组件NewBoards代码 #

const NewBoards: React.FC = () => {
  let { boardId } = useParams();
  // 路由切换时该effect不会触发
  useEffect(() => {
    console.log('ue trigger page change',boardId )
  }, []); 

  // 将boardId加入依赖后可正常触发
  useEffect(() => {
    console.log('ue trigger page change',boardId )
  }, [boardId ]);
  
  return (
    <>
      {console.log('>rerender')}
      <p> newBoards</p>
      <p>{boardId}</p>
    </>
  )
}

路由定义代码 #

{
  path: '/boards/',
  element: authorized ?  <Boards1 />  : <Login />,
  children: [{
    path: '/boards/:boardId',
    element: authorized ? <NewBoards /> : <Login />,
  }]
},

问题表现 #

在/boards/123跳转至/boards/345这类同路由模式、仅URL动态参数变化的场景下，出现两个不符合预期的现象：

• 空依赖数组的useEffect不会随路由变更触发，只有将boardId加入依赖数组，对应回调才会执行
• NewBoards组件内部状态会被保留，路由切换时不会重置为初始值

根本原因 #

这是React Router v6的默认设计行为，完全遵循React本身的组件生命周期判定规则：

• 同路由模式下仅动态参数变化时，React Router不会卸载重挂载匹配到的路由组件，只会触发组件重渲染。上述场景中跳转前后始终匹配/boards/:boardId这条路由规则，渲染的都是同一个NewBoards组件引用，React判定为同一组件实例直接复用，不会走卸载、重新挂载的完整生命周期流程。
• 空依赖数组的useEffect触发时机是组件首次挂载完成后，既然组件没有被卸载重挂，这个effect自然不会重新执行。useParams()返回的参数值变化本质是路由上下文更新带来的重渲染触发，只有将变化的参数加入effect依赖数组，对应回调才会在参数更新时执行，这完全符合React Hooks的依赖执行规则。
• 组件内部状态保留是组件实例被复用的直接结果：只要组件实例没有被销毁，React就会保留其内部state、ref等所有状态值，不会因为URL参数变化自动重置。

处理方案 #

• 常规业务场景直接将需要响应变化的路由参数、路由状态加入useEffect的依赖数组即可，这是符合React Hook设计规范的标准写法，没有额外副作用。
• 如果确实需要在参数变化时强制重置组件所有内部状态、触发挂载类逻辑，可以给路由组件绑定和动态参数关联的key属性，当key值变化时，React会自动卸载旧组件实例、挂载全新的组件实例，空依赖的useEffect也会随之重新执行。示例调整方式：

  // 路由配置中给组件传入随boardId变化的key
  {
    path: '/boards/:boardId',
    element: authorized ? <NewBoards key={boardId} /> : <Login />,
  }
  

  注意这种方式会清空组件原有所有内部状态，需确认符合业务预期后再使用。

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