Menu
I am trying to create a file viewer and I want to nest the subdirectories. I am using ui-router and I want each subdirectory to have its own URL and state.
Say I have the following structure:
Root
|__Folder
|__Folder
|__SubFolder
|__SubSubFolder
I want my routes to be:
files/:folderID/:SubFolderID/:SubSubFolderID
And I would like to do that recursively as opposed to creating a new state for each subdirectory
434
However, this is a post about nested routes, not just rendering normal routes. Typically with nested routes, the parent Route acts as a wrapper over the child Route. This means that both the parent and the child Route s get rendered.
To recap, nested routes allow you to, at the route level, have a parent component control the rendering of a child component. Twitter's /messages route is the perfect example of this. With React Router, you have two options for creating nested routes.
It may seem impractical, but having the ability to render recursive routes will serve as both a solid exercise to solidify your understanding of React Router as well as give you the ability to solve potentially tricky UI problems down the road. When would you ever want to render recursive routes? Well, like porn, you'll know it when you see it.
Typically with nested routes, the parent Route acts as a wrapper over the child Route. This means that both the parent and the child Route s get rendered. In our example above, only the child Route is being rendered.
I would suggest, do it with one state and one param - folderPath. Because ui-router should have all the states defined soon enough, to support url routing. All these unique folderPath could differ, could be dynamic - in the runtime, in app life time.
Dynamic state definition is always an issue (if states are defined in app.run() it could happen that user comes to url which is not defined yet -
otherwiseis used... bad)
Dynamic url parameter - will work always. We just have to parse it in controller and decide next steps. Here is a working example.
The state and its param could be like this
.state('files', {
url: '/files/{folderPath:[a-zA-Z0-9/]*}',
templateUrl: 'tpl.files.html',
controller: 'FileCtrl'
});
Later we can dynamically generate navigation (links) like this:
<a href="#/files/Folder1">
<a href="#/files/Folder1/SubFolder1/">
<a href="#/files/Folder1/SubFolder1/SubFolderA">
<a href="#/files/Folder1/SubFolder1/SubFolderB">
<a href="#/files/Folder1/SubFolder2/SubFolderX">
check that in this example
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
