React Router调用history.push()后页面未重新渲染如何解决

• 核心原因是DictionaryEntryPage组件中获取单词数据的useEffect未添加路由参数作为依赖：当你通过history.push从/dictionary/wordA跳转到/dictionary/wordB时，组件不会重新挂载，空依赖的useEffect只会在首次挂载时执行一次，不会触发新的单词数据请求，因此页面没有更新。
• 路由配置精度不足：当前路由path="/dictionary"会匹配所有/dictionary前缀的路径，进一步确保了路由参数变化时组件不会重建，放大了依赖缺失的问题。

1. 给useEffect添加路由参数依赖，确保参数变化时重新拉取数据：

useEffect(() => {
  const { requestedWord } = match?.params ?? {};
  if (requestedWord) {
    (async () => {
      const data = await parseWordData(requestedWord);
      setWordData(data || null);
    })();
  } else setWordData(null);
}, [match?.params.requestedWord]); // 添加路由参数为依赖项

2. 优化路由配置，明确声明可选参数，提升路由匹配精度：

<Route path="/dictionary/:requestedWord?" component={DictionaryEntryPage} />

末尾加个?表示requestedWord是可选参数，同时兼容/dictionary和带参数的/dictionary/xxx两种路径。

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