v6版本升级后路由组件复用问题记录
在将React Router从v5升级到v6的过程中，我们遇到了一个意料之外的路由组件复用问题。这个问题主要体现在当路由参数发生变化时，组件没有正确更新。
问题复现步骤
- 创建一个带有动态参数的路由组件：
function UserDetail() {
const { userId } = useParams();
const [userData, setUserData] = useState(null);
useEffect(() => {
// 模拟API调用
fetchUser(userId).then(setUserData);
}, [userId]);
return <div>用户ID: {userId}</div>;
}
- 在路由配置中使用：
<Routes>
<Route path="/user/:userId" element={<UserDetail />} />
</Routes>
- 当在URL中从
/user/1切换到/user/2时，组件的props不会重新渲染。
解决方案
方案一：使用useEffect监听路由参数变化
function UserDetail() {
const { userId } = useParams();
const [userData, setUserData] = useState(null);
useEffect(() => {
fetchUser(userId).then(setUserData);
}, [userId]); // 确保依赖数组包含userId
}
方案二：使用useNavigate和路由跳转
function UserList() {
const navigate = useNavigate();
const handleUserSelect = (userId) => {
navigate(`/user/${userId}`);
};
}
方案三：组件内部重新渲染机制 在v6中，需要确保路由参数变化时组件能够正确触发重新渲染，可以使用key属性强制刷新：
<Routes>
<Route
key={location.pathname}
path="/user/:userId"
element={<UserDetail />}
/>
</Routes>
这个问题在v6版本中需要特别注意组件的依赖项管理和路由参数变化处理，避免数据更新不及时的问题。
讨论