SubFolder.js

Recursive Component

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;

Routing without a parent component. To render only children. File manager like in dropbox

I am iterating through the nested objects recursively and iterating over the children key.

In principle, it turns out to pass, but with nested links, it is rendered at the bottom of the main component

CodePudding user response：

If I understand your question/issue correctly, you don't want to render each "parent" node at the same time as its children nodes/routes. If this is the case then I make the suggestion to move the "parent" node UI to an index route at each level of depth rendering descendent routes.

Rendering the parent node its own index route will render it separate from its children descendent routes. Each Routes component also builds routes relative to its parent Routes component, so you should be using relative paths.

Example:

const SubFolder = ({ node }) => (
  <Routes>
    <Route
      index // <-- index route
      element={
        <div>
          <Link to="..">Back</Link> // <-- maybe provide link back to parent?
          <h1>{node.path}</h1>
          {node.children?.map((item) => (
            <li key={item.path}>
              <Link to={item.path}> // <-- relative from parent
                {item.path}
              </Link>
            </li>
          ))}
        </div>
      }
    />
    {node.children?.map((item) => (
      <Route
        key={item.path}
        path={`${item.path}/*`} // <-- relative from parent, allow descendants
        element={<SubFolder node={item} />}
      />
    ))}
  </Routes>
);