React Route路径参数变化是否会触发对应组件重新挂载与首次渲染？

核心问题答案 #

• 默认情况下（你当前的代码写法），路由参数变化不会触发ChatRoom组件的卸载/重新挂载，也不会触发新的首次渲染：React Router v5 会复用同一个<Route>匹配的组件实例，仅触发组件的更新重渲染，只有当路由跳转出当前匹配规则、再跳转回来时才会触发重挂载。
• 你当前的ChatRoom代码存在逻辑缺陷：组件内获取聊天室消息的useEffect依赖数组为空，只会在首次挂载时执行一次，当chatID从ChatA变为ChatB时，不会重新监听新聊天室的消息快照，会出现跳转聊天室后内容不更新的问题。

修复方案 #

方案1（推荐）：更新useEffect依赖，适配参数变化 #

将chatID加入useEffect的依赖数组，同时添加清理函数取消上一个聊天室的监听，避免内存泄漏，修正后的ChatRoom useEffect代码如下：

useEffect(() => {
    // 监听登录状态
    const unsubAuth = auth.onAuthStateChanged(user => {
        if (user) {
            db.collection('users').get().then(snapshot => {
                snapshot.docs.forEach(doc => {
                    if (doc.id === user.uid) {
                        setUser(doc.data().username);
                    }
                })
            })
        }
    })
    // 监听当前聊天室消息，保存取消监听方法
    const unsubChat = db.collection(chatID).orderBy('createdAt').onSnapshot(snapshot => {
        setDocs(snapshot.docs);
    })
    // 清理旧监听
    return () => {
        unsubAuth();
        unsubChat();
    }
}, [chatID, auth, db]) // 新增chatID作为依赖

方案2（可选，不推荐）：强制组件重挂载 #

如果业务确实需要路由参数变化时触发组件重新挂载、走首次渲染流程，可以给ChatRoom组件添加和chatID绑定的key属性，React检测到key变化就会销毁旧实例、挂载新实例：

// 修改Home组件内的Route配置
<Route path="/rooms/:ChatID">
  <ChatRoom key={useParams().ChatID} db={db} auth={auth}/>
</Route>

该方案会额外产生组件挂载销毁的性能开销，非必要不建议使用。

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