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 ponent that loads the root folder Folder-1. When you click on Folder-1, the route changes and causes another ponent to load.

My route Looks like <Route exact path="/clients/:folder" ponent={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.

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 ponent that loads the root folder Folder-1. When you click on Folder-1, the route changes and causes another ponent to load.

My route Looks like <Route exact path="/clients/:folder" ponent={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.

• javascript
• reactjs
• react-router

2 Answers 2

This can be done by using the match all *. Something like:

<Route path="/clients/*">

Whatever path is passed after /clients will then be available in match.params["0"].

Remove the exact match it would work

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