In my react App, I have the functionality to create Folders and Files. A folder can have any number of folders inside 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, What I am doing is. There's a component that loads the root folder Folder-1, When you click on Folder-1. I change the route and load another component.
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 envisioned 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
Remove the exact match it would work
You can refer to this sample https://codesandbox.io/s/great-tu-yr85t
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"].
Related
I'm using Vue.js 2.x + Quasar 1.x with http-vue-loader (so no build tools) at the moment.
I put a q-dialog in a separate component - let's call it MyComponent, and when I just hook it up in a parent component like so:
<my-component></my-component>
then nothing happens, it's not even in the DOM... When I just insert the whole q-dialog template into the parent component, without having its separate external component, everything works just fine with a simple v-model.
So I imported the component successfully, that part is fine.
I was trying to invoke it when I click on a button, but I can't really communicate with the component this way.
Now I've come across two separate ways of creating dialogs in Quasar, the first one is using the component when it's not in its separate component. The second one seems to be the one I might need for a separate dialog component. The problem is that importing an external component with vue-http-loader looks like this:
components: {
'my-component': httpVueLoader('/components/MyComponent.vue'),
},
while according to the Quasar docs, it should look like this:
import CustomComponent from '..path.to.component..'
...
this.$q.dialog({
component: CustomComponent,
...
The docs are a bit confusing to me as well. :/
Unfortunately, I can't see the CustomComponent code, which is required to be created following an interface, which is described in this docpage under the warning. Make sure that CustomComponent is valid.
P.S. - Both of those ways do the same thing but in different ways. With the first one, you'll import that component to another and set him in the template, but with the second one, you'll call a tool, that creates a new modal with passed parameters. But the second one doesn't have all functionality compared to the first one.
Please check out this page and its source code. If I remove the cdn for the vue-tag-input component, everything except the component renders. But as soon as I add the cdn back, everything after first instance of tag-input component is not rendered on DOM. No error logs.
Please help me understand what is going on. As far as I understand there should not be any issue with component as I can render multiple instances and the same page layout in vue app using cdn. Check out App.vue file as well. This works perfectly fine.
You need to use valid html5 so you can't use self closing tags.
Change <tag-input v-model="tags" /> to <tag-input v-model="tags"></tag-input>
When vue component is used directly inside the html (not in single file vue component template), we need to take care of certain things
Don't use self closing tag for the component
convert all camel case to kebab case for component name and all the props (custom attributes)
There were above two errors because of which the implementation in question was not working.
I am trying to make my first Sapper site and I'm populating the content similarly to how it's done in the template here.
My problem is that I want to allow usage of custom components in the content of {#html post.html}. Currently it doesn't work, the HTML is just inserted there without being treated like a component, even if I import the component in [slug].html and it works if used directly somewhere besides that {#html post.html}.
The behaviour is kind of expected as the content is fetched after svelte has finished it's work, but I am not sure what should I do then. I want a couple of custom components like <FancyButton> to be usable in the user generated content.
Can I ask the [slug].html component to look at the post.html or just whole content after insertion and create an instance of child component wherever it should be? Or should I somehow compile the string beforehand on the server?
From Nuxt documentation:
Nested Routes
Nuxt.js lets you create nested route by using the
children routes of vue-router.
To define the parent component of a nested route, you need to create a
Vue file with the same name as the directory which contain your
children views.
Warning: don't forget to write inside the parent
component (.vue file).
How can we translate technically the bold text?
Your bold text is missing write <nuxt-child/>
So technically it means that you need to have <nuxt-child/> tag in parent component.
See this example https://github.com/nuxt/nuxt.js/tree/dev/examples/nested-routes/pages
I have an ember engine, and within that I have defined a route. It works as expected. It's called my-route. It was defined like this:
this.route('my-route', {path: '/my-route/:myparams'}); in the routes.js file.
As you can see, it has a dynamic segment, and shows different values based on myparams.
I want to add a nested route to this route. Let's say .../my-route/1 shows a list of items. When the user clicks on any of the items listed on the page, the route should be: my-route/display but instead its my-route/1/display. I don't want the 1 here as it could be misleading.
Also, the link-to doesn't open anything either, the click does nothing.
This is how I changed my routes.jsfile:
this.route('my-route', {path: '/my-route/:myparams'}, function() {
this.route('display');
});
In display.hbs file I added dummy data, and display.js is also empty, just extending from Ember.route.
The my-route.hbs links like this:
{{#link-to 'my-route.display'}} Open me {{/link-to}}'
I am new to EmberJS, and would appreciate if someone could please tell me how to:
Remove the dynamic segment information
Make the link-to work
Thank you!
1) I can think of no easy way to remove dynamic segment from the url -- if you must, you can probably just not use dynamic segment and send the information to the transitioning route via other ways - you can probably set the controller directly
"newRoute.controller.set('someProperty', my_param);"
or use needs api (http://emberjs.com/guides/controllers/dependencies-between-controllers/)
but note that both these methods would be making use of controllers. If you need to load data in the route depending on the query params, what comes to mind is using a service
But these methods are not very sophisticated and I'd say only go for it if dynamic segment is an absolute no.
2) this one is easier -- you need to pass in the dynamic part along with the route name when using link to -- as given in ember guide
https://guides.emberjs.com/v2.0.0/templates/links/
Based on the discussions with #Lux and #Chhirag Kataria, I ended up making two separate routes. I used the my-route as a dummy route, and nested the display and the list routes in it.