React：其他组件表单提交时如何重新渲染树形组件

一、修复路由跳转问题 #

当前路由问题核心是未正确配置嵌套路由，导致点击树形节点后无法在右侧区域渲染对应页面，调整步骤如下：

1. 配置主布局路由，将左右布局作为父路由容器，右侧预留子路由出口：

// App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import CategoryAdd from './CategoryAdd';
import CategoryEdit from './CategoryEdit';

function App() {
  return (
    <Router>
      <Routes>
        {/* 主布局作为父路由，所有子路由都在右侧渲染 */}
        <Route path="/" element={<Layout />}>
          <Route path="category/add" element={<CategoryAdd />} />
          <Route path="category/edit/:id" element={<CategoryEdit />} />
          {/* 默认路由，设置初始右侧页面 */}
          <Route index element={<div>请选择分类节点</div>} />
        </Route>
      </Routes>
    </Router>
  );
}

2. 在Layout组件中添加子路由出口，确保右侧区域渲染路由对应组件：

// Layout.jsx
import { Outlet, useNavigate } from 'react-router-dom';
import TreeComponent from './TreeComponent';

function Layout() {
  const navigate = useNavigate();
  // 树形节点点击事件，跳转对应路由
  const handleNodeClick = (node) => {
    if (node.type === 'add') {
      navigate('/category/add');
    } else if (node.type === 'edit') {
      navigate(`/category/edit/${node.id}`);
    }
  };

  return (
    <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
      {/* 左侧树形组件 */}
      <div style={{ width: '300px', borderRight: '1px solid #eee' }}>
        <TreeComponent onNodeClick={handleNodeClick} />
      </div>
      {/* 右侧路由出口，渲染子路由组件 */}
      <div style={{ flex: 1, padding: '20px' }}>
        <Outlet />
      </div>
    </div>
  );
}

二、实现树形组件局部刷新（无整页/右侧组件刷新） #

核心思路是状态提升，将树形数据的状态放在父布局组件中，通过props将更新方法传递给右侧的增删改组件，操作完成后更新父组件状态，触发左侧树形组件重新渲染。

1. 在Layout组件中维护树形数据状态，并提供更新方法：

// Layout.jsx
import { useState, useEffect } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import TreeComponent from './TreeComponent';

function Layout() {
  const [treeData, setTreeData] = useState([]);
  const navigate = useNavigate();

  // 模拟从接口获取初始树形数据
  useEffect(() => {
    fetchTreeData().then(data => setTreeData(data));
  }, []);

  // 更新树形数据的方法，传给右侧组件
  const updateTreeData = (newData) => {
    setTreeData(newData);
    // 可选：更新后跳回初始页面
    navigate('/');
  };

  const handleNodeClick = (node) => {
    if (node.type === 'add') {
      navigate('/category/add');
    } else if (node.type === 'edit') {
      navigate(`/category/edit/${node.id}`);
    }
  };

  return (
    <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
      <div style={{ width: '300px', borderRight: '1px solid #eee' }}>
        <TreeComponent data={treeData} onNodeClick={handleNodeClick} />
      </div>
      <div style={{ flex: 1, padding: '20px' }}>
        {/* 通过Outlet的context传递更新方法给子路由组件 */}
        <Outlet context={{ updateTreeData, treeData }} />
      </div>
    </div>
  );
}

// 模拟接口请求
const fetchTreeData = () => {
  return Promise.resolve([
    { id: 1, title: '分类1', children: [{ id: 2, title: '子分类1' }] },
    { id: 3, title: '分类2' }
  ]);
};

2. 在右侧新增/编辑组件中，使用useOutletContext获取更新方法，提交表单后调用更新：

// CategoryAdd.jsx
import { useState, useOutletContext } from 'react';

function CategoryAdd() {
  const [title, setTitle] = useState('');
  const { updateTreeData, treeData } = useOutletContext();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 模拟新增分类，更新树形数据
    const newCategory = { id: Date.now(), title };
    const newTreeData = [...treeData, newCategory];
    updateTreeData(newTreeData);
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="输入分类名称"
        required
      />
      <button type="submit">添加分类</button>
    </form>
  );
}

三、关键注意点 #

• 确保使用react-router-dom v6+的嵌套路由语法（Outlet、Route嵌套），避免与v5版本写法混淆。
• 局部刷新依赖状态驱动，禁止使用window.location.reload()或强制刷新整个组件树。
• 如果数据来自后端，updateTreeData方法中应先调用后端接口，确认成功后再更新前端状态。

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