React路由：动态段变化时如何重新加载页面？

问题根源 #

你直接在Route的element属性中调用useParams()是错误的——React Hooks只能在组件内部使用，所以这种写法不会生效，自然无法通过key触发组件重新挂载。

解决方案步骤 #

1. 用包装组件实现key触发组件重新挂载

创建一个路由包装组件，在内部获取路由参数并传递给Artist组件作为key，参数变化时React会自动卸载旧组件、挂载新组件：

// 定义路由包装组件
function ArtistRouteWrapper() {
  const { id } = useParams();
  // 用id作为key，参数变更时强制组件重新挂载
  return <Artist key={id} />;
}

// 修改路由配置
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/artist/:id" element={<ArtistRouteWrapper />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

2. 修复页面滚动问题

组件重新挂载后，在Artist组件的useEffect中添加滚动到顶部的逻辑，确保每次加载都回到页面顶端：

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

function Artist() {
  const location = useLocation();
  
  useEffect(() => {
    // 组件挂载时滚动到页面顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
    // 这里可以添加基于新参数/state的初始化逻辑
    console.log('新艺术家数据:', location.state);
  }, []); // 空依赖数组，仅在组件挂载时执行

  // 组件其他逻辑...
}

3. 移除navigate(0)调用

现在通过key已经实现了组件完全重新加载，无需再调用navigate(0)，避免参数丢失的问题。你的跳转逻辑可以保持原样：

function handleSelectArtisttt(relatedArtist) {
    navigate(`/artist/${relatedArtist.id}`, {
      state: { ...relatedArtist, searchValue: String(state.searchValue) },
    });
}

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