React Router v2能否实现递归路径？基于v15.4+v2项目的适配咨询

没问题，完全可以实现和React Router v4递归路径示例一致的效果！虽然React Router v2是静态路由配置模式，但我们可以通过通配符路由+组件内部递归渲染的方式来模拟动态递归的行为，下面是具体的实现方案：

核心思路 #

React Router v2不支持v4那样的无限嵌套动态路由配置，但我们可以利用路由的通配符（*）匹配任意层级的路径，然后在组件内部解析路径参数，递归渲染文件夹/节点层级，从而实现和v4示例完全相同的效果。

具体实现步骤 #

1. 模拟层级数据（替换为你的实际数据） #

首先我们需要一个层级化的数据源，比如文件夹结构：

// 模拟文件夹数据，key为文件夹ID，包含子文件夹ID列表
const folders = {
  '1': { id: '1', name: '根文件夹', childFolders: ['2', '3'] },
  '2': { id: '2', name: '项目文档', childFolders: ['4'] },
  '3': { id: '3', name: '备份文件', childFolders: [] },
  '4': { id: '4', name: 'React笔记', childFolders: [] }
};

2. 创建递归渲染的核心组件 #

这个组件会解析通配符匹配到的路径，拆分出每个层级的节点ID，然后递归渲染每一层的内容：

import React from 'react';
import { Link, Redirect } from 'react-router';

class FolderTree extends React.Component {
  // 递归渲染单个文件夹层级
  renderFolderLevel(folderIds) {
    if (folderIds.length === 0) return null;
    
    const currentFolderId = folderIds[0];
    const currentFolder = folders[currentFolderId];
    
    if (!currentFolder) {
      return <div style={{ marginLeft: '20px' }}>找不到指定文件夹</div>;
    }

    return (
      <div style={{ marginLeft: '20px', borderLeft: '1px solid #eee', paddingLeft: '10px' }}>
        <h3>{currentFolder.name}</h3>
        <ul style={{ listStyleType: 'none', paddingLeft: 0 }}>
          {currentFolder.childFolders.map(childId => (
            <li key={childId}>
              <Link to={`/folders/${folderIds.join('/')}/${childId}`}>
                {folders[childId].name}
              </Link>
            </li>
          ))}
        </ul>
        {/* 递归渲染下一层级 */}
        {this.renderFolderLevel(folderIds.slice(1))}
      </div>
    );
  }

  render() {
    // 解析通配符匹配到的路径部分
    const pathSplat = this.props.params.splat || '';
    const folderIdList = pathSplat.split('/').filter(id => id.trim()); // 过滤空字符串

    // 如果没有指定路径，默认跳转到根文件夹
    if (folderIdList.length === 0) {
      return <Redirect to="/folders/1" />;
    }

    return this.renderFolderLevel(folderIdList);
  }
}

export default FolderTree;

3. 配置React Router v2路由 #

只需要配置一个通配符路由，就能匹配任意层级的路径：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import FolderTree from './FolderTree';

// 根组件
const App = ({ children }) => (
  <div style={{ maxWidth: '800px', margin: '20px auto' }}>
    <h1>递归文件夹示例</h1>
    {children}
  </div>
);

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      {/* 默认路由跳转到根文件夹 */}
      <IndexRoute component={() => <Redirect to="/folders/1" />} />
      {/* 通配符路由匹配所有/folders/xxx/xxx/xxx格式的路径 */}
      <Route path="folders/*" component={FolderTree} />
    </Route>
  </Router>,
  document.getElementById('root')
);

效果说明 #

这个实现完全复刻了React Router v4递归路径示例的核心功能：

• 点击子文件夹会跳转到对应层级的路径（比如/folders/1/2对应根文件夹→项目文档）
• 页面会递归渲染每一层的文件夹内容和子文件夹链接
• 支持无限层级的嵌套（只要你的数据源有对应的层级）

备选方案（有限层级场景） #

如果你的项目中文件夹层级是固定有限的，也可以用传统的嵌套路由配置方式，比如预先定义3层嵌套路由：

<Route path="/" component={App}>
  <IndexRoute component={() => <Redirect to="/folders/1" />} />
  <Route path="folders/:folderId" component={Folder}>
    <Route path=":folderId" component={Folder}>
      <Route path=":folderId" component={Folder} />
    </Route>
  </Route>
</Route>

这种方式更符合React Router v2的静态路由思维，但缺点是层级受限，不如通配符方式灵活。

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