[SOLVED] dynamically pass unknown number of parameters to react router

dynamically pass unknown number of parameters to react router

In my react App, I have the functionality to create Folders and Files. A folder can have any number of folders inside of it.

like so

Folder-1
  |_Folder-1-1
  |_Folder-1-2
    |_Folder-1-2-1
    |_Folder-1-2-2
      |_Folder-1-2-2-1
       .
       .
       .

and it can get deeper up to any level.

Currently, there's a component that loads the root folder Folder-1. When you click on Folder-1, the route changes and causes another component to load.

My route Looks like <Route exact path="/clients/:folder" component={ClientFolder} />

But the problem here is I don't know the number of parameters.

The way I envision it is:

You click on Folder-1, URL changes to /clients/Folder-1. Then, it loads all the Folders inside Folder-1, i.e Folder-1-1, and Folder1-2
You click on Folder-1-2, URL changes to /clients/Folder-1/Folder-1-2, loads files and folders inside Folder-1-2

and so on.

So my question is, How can I have any number of nested routes using a single route and a single Component?

I am using react-router 5.

Solution

Remove the exact match it would work

You can refer to this sample https://codesandbox.io/s/great-tu-yr85t