如何实现未知层级的无限嵌套路由？

要支持无限层级的嵌套路由，核心思路是利用路由通配符匹配任意深度的子路径，再通过递归组件动态渲染对应层级的内容。以下以React Router为例给出实现方案：

1. 基础路由配置（React Router v6） #

首先在根路由中使用通配符*匹配folder下的所有子路径：

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

function App() {
  return (
    <Routes>
      {/* 通配符*会匹配folder之后的所有路径，不管层级多少 */}
      <Route path="folder/*" element={<NestedFolder />} />
    </Routes>
  );
}

2. 实现递归嵌套组件 #

创建NestedFolder组件，通过路由钩子获取当前路径的层级信息，递归渲染内容：

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

function NestedFolder() {
  // 获取通配符匹配到的剩余子路径，比如url为/folder/child1/child2时，subPath为"child1/child2"
  const { '*': subPath } = useParams();
  // 拆分路径为层级片段，过滤空字符串避免异常
  const pathSegments = subPath ? subPath.split('/').filter(seg => seg) : [];

  return (
    <div className="folder-container">
      {/* 渲染当前层级的内容，可根据pathSegments判断层级或加载对应组件 */}
      <ComponentExample 
        level={pathSegments.length + 1} 
        currentPath={`folder/${subPath || ''}`} 
      />

      {/* 如果存在子层级，递归渲染下一级组件 */}
      {pathSegments.length > 0 && (
        <div className="nested-folder">
          <NestedFolder />
        </div>
      )}
    </div>
  );
}

3. 按需加载不同子组件（可选） #

如果不同子路径需要对应不同组件，可以通过路径片段映射组件：

// 定义子组件映射表
const ComponentMap = {
  child1: Child1Component,
  child2: Child2Component,
  child3: Child3Component,
  // 可扩展更多子组件
};

function NestedFolder() {
  const { '*': subPath } = useParams();
  const pathSegments = subPath ? subPath.split('/').filter(seg => seg) : [];

  // 获取当前层级对应的组件，默认用ComponentExample兜底
  const CurrentComponent = pathSegments.length 
    ? ComponentMap[pathSegments[pathSegments.length - 1]] || ComponentExample
    : ComponentExample;

  return (
    <div>
      <CurrentComponent />
      {pathSegments.length > 0 && <NestedFolder />}
    </div>
  );
}

React Router v5及以下版本适配 #

如果使用旧版React Router，可通过useRouteMatch实现嵌套路由匹配：

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

function NestedFolder() {
  const match = useRouteMatch();

  return (
    <div>
      <ComponentExample />
      {/* 动态匹配子层级路径，递归渲染自身 */}
      <Route path={`${match.path}/:child*`} component={NestedFolder} />
    </div>
  );
}

// 根路由配置
function App() {
  return (
    <Route path="/folder" component={NestedFolder} />
  );
}

关键注意点 #

• 通配符*要放在路由配置的合适位置，避免覆盖其他精准匹配的路由
• 递归组件中要注意终止条件（比如路径片段为空时停止递归），防止无限渲染
• 可根据业务需求，结合useLocation等钩子获取完整路径，做更多自定义逻辑

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