React Router Dom动态路由下仅重渲染MainPanel组件的实现方法

数据老陈

2026-7-3

解决方案

1. 修改App.tsx中的路由结构

将原chat路由改为嵌套路由，让Chat组件作为承载Navbar、Sidebar的父容器，带id参数的子路由负责渲染MainPanel：

<Route path="/" element={<RootLayout />}>
  <Route index element={<Landing />} />
  <Route path="auth" element={<Auth />} />
  {/* Chat作为父路由容器，Navbar和Sidebar常驻此处 */}
  <Route path="chat" element={<Chat />}>
    {/* 带chatId参数的子路由，渲染动态的MainPanel */}
    <Route path=":chatId" element={<MainPanel />} />
    {/* 可选：添加默认子路由，提示用户选择聊天会话 */}
    <Route index element={<div>请选择一个聊天会话</div>} />
  </Route>
</Route>

2. 改造Chat.tsx组件

在Chat组件中使用Outlet（来自react-router-dom）来渲染子路由内容，这样Navbar和Sidebar不会随路由参数变化重渲染，只有Outlet内的MainPanel会动态更新：

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

const Chat = () => {
  return (
    <div className="chat-wrapper">
      {/* 这两个组件仅挂载一次，不会因chatId变化重新渲染 */}
      <Navbar />
      <Sidebar />
      {/* Outlet自动匹配并渲染当前子路由的组件（即MainPanel） */}
      <Outlet />
    </div>
  );
};

export default Chat;

3. 在MainPanel中获取并监听聊天ID

在MainPanel组件里通过useParams获取chatId，并监听其变化来加载对应聊天内容：

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

const MainPanel = () => {
  const { chatId } = useParams<{ chatId: string }>();

  // 仅当chatId变化时，重新加载对应聊天数据
  useEffect(() => {
    if (chatId) {
      // 调用接口获取该聊天的消息记录
      fetchChatMessages(chatId);
    }
  }, [chatId]);

  return (
    <div className="main-panel-content">
      {/* 展示对应chatId的聊天内容 */}
    </div>
  );
};

export default MainPanel;