React Router v6跳转至路径层级更少的链接时不渲染问题

问题场景 #

在React 18.2.0 + React Router 6.3.0环境下搭建多层嵌套路由（如/explore、/explore/USA、/explore/USA/Florida），使用同一个ExplorePath组件处理所有路由。向下钻取路径时内容渲染正常，但点击面包屑的<Link>跳转至层级更高的路径时，URL更新但组件内容不渲染。添加reloadDocument可解决但会触发页面刷新。

后续排查发现：跳转短路径时组件被复用而非重新创建，因此用componentDidUpdate监听props变化触发数据更新作为临时方案。疑问：这是React函数与组件交互的bug还是未理解的特性？

解答 #

这是React Router 6的特性，并非bug。

React Router为了优化性能，会复用匹配到的组件实例，而非销毁后重新创建。当路由参数或路径变化但组件未被卸载时，组件不会自动重新渲染或触发数据更新——因为React认为组件实例还存在，只会更新props，不会执行初始化逻辑（比如类组件的componentDidMount、函数组件的无依赖useEffect）。

合理解决方案 #

类组件（对应你的临时方案）

继续使用componentDidUpdate监听路由相关props的变化，对比新旧props（比如路由参数、location对象），当路径参数变化时重新请求数据或更新组件状态：

componentDidUpdate(prevProps) {
  // 对比路由参数或location.pathname
  if (this.props.match.params.path !== prevProps.match.params.path) {
    // 触发数据更新逻辑
    this.fetchData(this.props.match.params.path);
  }
}

函数组件

1. 依赖路由参数触发更新：使用useParams()获取路由参数，并将其作为useEffect的依赖项，参数变化时自动执行数据更新逻辑：

import { useParams } from 'react-router-dom';

function ExplorePath() {
  const { country, state } = useParams();
  // 组合当前路径参数
  const currentPath = [country, state].filter(Boolean).join('/');

  useEffect(() => {
    // 路径变化时重新请求数据
    fetchData(currentPath);
  }, [currentPath]); // 依赖currentPath，参数变化时触发

  // 渲染逻辑
}

2. 避免强制刷新：不要使用reloadDocument，这会完全刷新页面，丢失SPA的优势。如果需要强制组件重新挂载（不推荐，除非特殊场景），可以给路由组件添加key属性，用location.pathname作为key：

<Route path="/explore/:country?/:state?" element={<ExplorePath key={window.location.pathname} />} />

这种方式会让React在路径变化时销毁旧组件并创建新实例，触发初始化逻辑，但会丢失组件内部状态，影响性能，仅建议在极端场景使用。

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