Consider a drop-down menu that routes when changed.
Logically we have a layout as so:
<Things>
{/* Dropdown menu that, when item is selected,
routes to appropriate Thing-specific path */}
<ThingsDropdown />
{/* Component that represents the currently selected thing. */}
<Thing />
</Things>
The idea being that the top-level here is /things/, and choosing an item from the dropdown routes to /things/:thingId/.
When loading /things/:thingId/ directly, the value of the dropdown should default to :thingId. But the parent component (Things) does not have access to the Thing-specific parameter.
This is not a problem unique to React Router. Ember's routing system has the same limitation.
What is the recommended pattern for dealing with this use case? It seems wasteful to have to specify the current thingId twice (once as a parameter, and once in state so that it can be set correctly in the parent component).
Thanks.
Adam
After a bit of research, I've determined the solution here is to use a Route that always renders, and to determine the selected thingId by looking at the match parameter (if set) passed to the component.
Related
This is the component:
https://marmelab.com/react-admin/SimpleFormIterator.html
I want the first item to be required, and the user shouldn't be able to delete it.
As far as I understand, there is no built-in way for this component to do this, at this point.
I am wondering if there is a way to create a custom wrapper for this component, that can do this. Maybe render the first item separately within this custom wrapper?
To show the first item by default, you can set the default value to an empty array of objects.
<ArrayInput
source="address"
label="address"
defaultValue={[{}]}
></ArrayInput>
I'm using react-router-native to navigate between the "pages" of my app. The problem here is that I want to change the app-bar visibility depending on the user location.
So, I need a way to watch and detect the route, so I can manipulate-it
Solved!
To solve the problem I created a callback function inside my components, that returns whenever it loads. So with that I could just check a variable like
isAtLogin ? (<Appbar />) : (<View />) to show and hide the appbar.
Our business logic allows different types of profile pages (user profiles, company profiles, etc - each with its own template), but the URLs do not discriminate between the types of profiles. All URLs are of the format:
mysite.com/{{ profile-vanity-alias }}
How would a vue-router configuration determine which component to render? e.g.
mysite.com/zuckerberg should render a user profile page
mysite.com/facebook should render a company profile page
mysite.com/jeffbezos does not exist so it should render a 404
mysite.com/companies/usa should render a different page with a list of companies from USA (/companies/:country? is a known route that can be hardcoded)
Furthermore, we're also considering to use vue-ssr (for SEO); I never really used SSR, so that's something where I wouldn't know where to start - a few pointers would be extremely helpful!
Thanks!
you can use switch logic to determine which component you need to load, then dynamically load the component.
<component v-bind:is="component" />
Maybe you can look into detail with this article. https://blog.logrocket.com/how-to-make-your-components-dynamic-in-vue-js/
The route path is obviously something like /:profile. I would have a generic parent component that responds to that route and loads the corresponding profile object (from the API, etc) and, based on some flag or other criteria, it displays the profile component of the person or the one of the company - and here a dynamic component might play a role.
As a short sketch, in the parent component I would have:
<div>
<user-profile v-if="currentObject.isUser" :id="currentObject.id" />
<company-profile v-if="currentObject.isCompany" :id="currentObject.id" />
</div>
I would like to pass data when navigating from one route to another, but the data shouldn't be shown to the user in the URL, as it is with route parameters.
Instead, I want the data to stay "hidden" from the user, since, in my case, I want to pass an authentication key (which is pretty long and shouldn't necessarily be shown to the user).
Is this achievable using router.push()?
What I think I would do to solve this, is to define props, just below where you define your path, you can add props to it. See: Passing props to Route Components
Essentially you define what do you want to pass, an object, a value, whatever you need. And within your router-view component, you bind the prop that you want to pass.
For example:
: is shorthand for v-bind
<router-view :props-name-defined-in-router="value"></router-view>
Remember to use the proper casing in Vue.js See: Component name casing in templates
Additionally, I think this other question seems to fit your needs.
Passing props to Vue.js components instantiated by Vue-router
I'd like to change the layout for my resources, so that the page /resource-name shows a card with the tabs "List", "Create", "Edit". I managed to make it "list" under the List tab using dataProvider(), but I can't figure out how to render the Create & Edit components under the relevant tabs. Any advice?
For what I understood you want to have a component with a <TabbedShowLayout> with tabs for list, create and edit on the route /resource? The route /resource is the one RA assumes when a component is provider in the list prop of <Resource>, so if you create a component with a <TabbedShowLayout> an in <Tab> list, put a <List> component, on create and Create component, and for edit an Edit component it might work for what you desire, I have not tested it. However see if is not ideal to use the props create, edit, and list of Resource, with them you can present data and have actions linking to one another.
Maybe your problem is in routing, since create in RA defaults to /resource/create, could you clarify your problem?