I am creating a breadcrumb nav similar to app.box.com with mongo, express and react. The bread crumb on that website doesn't use URI to create the breadcrumb. For example if /home/level1/level2/level3 is the breadcrumb and I click on level2 the request made to server is /folder/{folder_id} instead of /home/level1/level2 and the breadcrumb truncates to /home/level1/level2. To achieve this, how to structure the data in mongodb? And how to handle it in react to create the breadcrumb while making sure that it will work between refresh?

If I create a schema like

{ _id: "asdfasdf", name: "level2", type: "folder", path: "/home/level1/level2" }

and then in react split the path into an array to create a breadcrumb then I won't be able to make /folder/{folder_id} GET requests. I can ignore the path, create an empty array state and then add path and URL to array. For example after initializing an empty array state, if I click on level1 button then { name: "level1", URL: "/folder/level1-id" } will be added to the array. Then I can use that array to construct breadcrumb. But this won't survive page refresh. Psuedo-code is as follows,

   const [pathArr,setPathArr] = useState([]);

   // Make initial request to /home

   // add { name: "Home", URL: "/folder/0" } to pathArr

   // parsed breadcrumb will /home

   // display files and folders received

   // click on level1 folder button

   // Push { name: "level1", URL: "/folder/level1_id" } to pathArr

   // parsed breadcrumb will /home/level1

   // Do same for level2, pathArr = [ {home obj},{level1 obj}, {level2 obj} ]

   // Click on level1 breadcrumb

   // pathArr = [ { home object }, { level1 object } ]
}

Any other suggestion on mongodb schema or react nav are appreciated.