React项目中如何根据用户点击生成带层级路径的URL？

完全可以生成你想要的这种带层级路径的URL，直接定位到树形表格的指定节点，以下是具体实现步骤：

1. 修改React Router路由配置 #

扩展路由规则，添加支持层级参数的路径，同时保留原路径的兼容性：

import { Routes, Route } from 'react-router-dom';

<Routes>
  {/* 原路径，保持原有访问方式 */}
  <Route path="/dashboard" element={<Dashboard />} />
  {/* 支持两级层级参数的路径，参数名可按需自定义 */}
  <Route path="/dashboard/:parent/:child" element={<Dashboard />} />
  {/* 如需支持更多层级，可继续扩展路由规则 */}
  <Route path="/dashboard/:level1/:level2/:level3" element={<Dashboard />} />
</Routes>

2. 在Dashboard组件中获取路由参数 #

使用react-router-dom的useParams钩子读取URL中的层级参数，同时用useNavigate处理路径跳转：

import { useParams, useNavigate } from 'react-router-dom';
import { useEffect, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

const Dashboard = () => {
  const { parent, child } = useParams();
  const navigate = useNavigate();
  const gridRef = useRef();

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

3. 根据参数自动展开并定位树形节点 #

在Ag Grid初始化完成后，根据路由参数匹配节点，自动展开对应层级并定位目标节点：

useEffect(() => {
  if (!gridRef.current || !parent) return;

  const gridApi = gridRef.current.api;
  const allNodes = gridApi.getAllNodes();
  
  // 匹配父节点（此处假设数据用name字段存储节点名称，需替换为实际字段）
  const parentNode = allNodes.find(node => node.data.name.replace(/\s/g, '') === parent);
  if (parentNode) {
    // 展开父节点
    gridApi.setNodeExpanded(parentNode, true);
    
    // 若有子节点参数，继续匹配并定位
    if (child) {
      setTimeout(() => {
        const childNode = allNodes.find(node => 
          node.data.name.replace(/\s/g, '') === child && 
          node.parent === parentNode
        );
        if (childNode) {
          // 滚动到子节点位置
          gridApi.ensureNodeVisible(childNode);
          // 可选：高亮目标节点
          gridApi.setFocusedCell(childNode.rowIndex, 'name');
        }
      }, 100); // 延迟执行确保父节点展开后子节点已加载完成
    }
  }
}, [parent, child]);

// 渲染Ag Grid组件
return (
  <div className="ag-theme-alpine" style={{ height: 600, width: 800 }}>
    <AgGridReact
      ref={gridRef}
      rowData={yourRowData}
      columnDefs={yourColumnDefs}
      treeData={true}
      animateRows={true}
      // 表格其他配置...
      onRowClicked={(params) => {
        // 点击节点时更新URL，生成可分享路径
        const nodePath = [];
        let currentNode = params.node;
        // 向上遍历获取完整层级路径
        while (currentNode && !currentNode.group) { // 根据你的树形结构调整判断逻辑
          nodePath.unshift(currentNode.data.name.replace(/\s/g, ''));
          currentNode = currentNode.parent;
        }
        // 跳转至对应层级路径
        navigate(`/dashboard/${nodePath.join('/')}`);
      }}
    />
  </div>
);

4. 关键注意事项 #

• 节点名称转URL参数时，建议替换空格或特殊字符（比如Erica Rogers转成EricaRogers或Erica-Rogers），避免URL解析异常。
• 若树形结构层级不固定，可使用通配符路由/dashboard/*，再手动解析路径片段，适配任意多层级场景。
• 确保Ag Grid的treeData配置正确，节点的父子关系映射符合业务数据结构。

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