如何在react-router-dom中实现无父元素渲染的文件夹路由

需求描述 #

想要在react-router-dom中实现类似Dropbox的文件管理器路由，要求仅渲染子组件而不渲染父元素——即进入子文件夹路径时，页面只显示子文件夹的内容，父文件夹的内容不再展示。

现有实现代码 #

SubFolder.js（递归组件） #

const nav = {
  path: "home",
  children: [
    {
      path: "folder1",
      children: [
        {
          path: "file",
          children: [
            {path: "nestedFolder"}
          ]
        }
      ]
    },
    {path: "folder2"}
  ]
}
const SubFolder = ({ node }) => {
  const { pathname } = useLocation();
  return (
    <div>
      <h1>{node.path}</h1>
      {node.children?.map((item, index) => (
        <React.Fragment key={index}>
        <Link to={`${pathname}${item.path}/`}>{ item.path }</Link><br/>
        </React.Fragment>
      ))}
      <Routes>
      {node.children?.map((item, index) => (
        <Route key={index} path={`${item.path}/*`} 
        element={<SubFolder node={item}/>}
        />
      ))}
      </Routes>
    </div>
  );
}

App.js #

const App = () => {
  return (
    <Routes>
      <Route path="/home/*" element={<SubFolder node={nav}/>}/>
    </Routes>
  );
}

export default App;

当前问题 #

通过递归遍历嵌套对象的children属性实现了路由跳转，但嵌套链接对应的内容会渲染在父组件内容的下方，父组件的UI（如h1和文件夹链接）并未消失，不符合“仅渲染子组件”的预期。

问题原因 #

当前每个SubFolder组件都会无条件渲染自身的UI（标题、链接）和子路由容器，导致进入子路径时，父组件的UI依然保留，子组件内容被追加在下方，而非替换父组件内容。

解决方案 #

给SubFolder组件添加路径匹配判断：仅当当前路由精确匹配该节点的完整路径时，才渲染该节点的UI；如果当前路由是该节点的子路径，则只渲染子路由对应的组件，不渲染自身UI。同时传递父路径参数，用于计算当前节点的完整路径。

修改后的代码 #

SubFolder.js

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

const nav = {
  path: "home",
  children: [
    {
      path: "folder1",
      children: [
        {
          path: "file",
          children: [
            {path: "nestedFolder"}
          ]
        }
      ]
    },
    {path: "folder2"}
  ]
}

const SubFolder = ({ node, parentPath }) => {
  const { pathname } = useLocation();
  // 计算当前节点的完整路径
  const currentFullPath = `${parentPath}${node.path}`;
  // 判断当前路径是否与当前节点的完整路径精确匹配（兼容带/结尾的路径）
  const isExactMatch = pathname === currentFullPath || pathname === `${currentFullPath}/`;

  return (
    <>
      {/* 仅精确匹配时才渲染当前节点的UI */}
      {isExactMatch && (
        <div>
          <h1>{node.path}</h1>
          {node.children?.map((item, index) => (
            <React.Fragment key={index}>
              <Link to={`${currentFullPath}/${item.path}/`}>{item.path}</Link><br/>
            </React.Fragment>
          ))}
        </div>
      )}
      {/* 子路由容器，渲染子节点组件 */}
      <Routes>
        {node.children?.map((item, index) => (
          <Route
            key={index}
            path={`${item.path}/*`}
            element={<SubFolder node={item} parentPath={`${currentFullPath}/`}/>}
          />
        ))}
      </Routes>
    </>
  );
}

export default SubFolder;

App.js

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

const App = () => {
  return (
    <Routes>
      {/* 传递初始父路径为"/" */}
      <Route path="/home/*" element={<SubFolder node={nav} parentPath="/"/>}/>
    </Routes>
  );
}

export default App;

说明 #

• 通过parentPath参数传递父节点的完整路径，结合当前节点的path计算出当前节点的完整路径currentFullPath。
• 利用isExactMatch判断当前路由是否精确匹配当前节点的路径，只有匹配时才渲染该节点的UI。
• 子路由的parentPath传递当前节点的完整路径加/，确保子节点的路径计算正确。
• 调整Link的跳转路径为基于当前节点完整路径的拼接，避免依赖pathname导致的路径错误。

内容的提问来源于stack exchange，提问作者Анваров Бахтибек