I have an application with more than one show view for a resource. This is because there are different "views" on our complex "user" resource.
I have tried to add the path
<CustomRoutes>
<Route path="/customUserView/:id/show" element={(props) => <CustomShow id={props.match.params.id} resource={'user'}/>} />
</CustomRoutes>
My CustomShow view works perfectly when part of the react admin routes (placed as a show={CustomShow} in a regular resource component, but I can't seem to get it to work outside, in a CustomView.
Thanks for the help
If you are building your CustomShow component based on the standard Show component,
then it requires passing some of the parameters to it (for example, record) via ShowContext.
An implementation based on the RecordContextProvider component may be suitable for you, there is an example here: "SimpleShowLayout - Displays Fields In A Stack".
Related
This question already has answers here:
Mount react-admin under /admin
(4 answers)
Closed last year.
I am trying to integrate react-admin into an existing react app and am able to get the basic starter pages up and running , however, after adding a dummy resource and clicking on it in the UI, I am redirected to http://my-application.net/[resource name], which is incorrectly showing my applications error page.
I am trying to set up react admin in a sandbox-like scenario to avoid conflicts with some custom stuff I'm using for routing* and I currently have things set up to display react-admin under the /admin path in my app. Is it possible to tell react-admin to prefix all of its links (i.e. when clicking on a resource) with admin so that my app can correctly detect and route these pages to react-admin? For example, in the scenario from the last paragraph, when clicking on the dummy resource, i want it to direct me to http://my-application.net/admin/[resource name] instead of http://my-application.net/[resource name]
The closest I have been able to get is this SO post, which talks about adding admin/ as a prefix to the name of all resources. I have been able to make this work with some tweaks to my routing configuration to send all /admin pages to react-admin, but changing the resource names like this also has the side effect of changing them in the UI (i.e. my users resource appears as admin/users in the sidebar of react-admin)
Other things I looked at that didn't seem to be useful:
Using the customRoutes prop in <Admin>
<Resource>'s props seem to be intended more for tweaking the end of urls for different CRUD operations
this SO post seems like it might be about something different since this is the first mention ive seen of UrlField.
Does React-admin have an option to automatically add a baseUrl to all it's links?
* While not relevant for this question, the reason I am trying to do things this way is because my routing system (UniversalRouter, see here) is redux-based and appears to directly conflict with some of the redux state that react-admin needs according to the Using redux in a custom app tutorial.
An answer I found from a post the StackOverflow "related" sidebar seems to suggest that the history API has this kind of functionality:
The only other thing I can think of is properly configuring baseName in your history.
referring to this line in the OP's question (variable name changed for clarity):
const newHistory = createHistory({ basename: '/myadmin' });
Passing this modified history into react-admin's Admin component seems to achieve the intended behavior where clicking on resource links now correctly redirects to that resource underneath the specified baseURL.
<Admin ... history={newHistory} ...>
This is also mentioned in this other answer, which is way more concise than mine or the one i based this answer off of.
I am using spartacus framework for storefront. I want to show tabs in my application and load pages based on selected tab. Is there any existing cms component or configuratio with which we can do or can i extent the cmscategorynavigation component and customize?
The CMSTabParagraphContainer is used on the product details page to display tabs. A CMSTabParagraphContainer can contain SimpleCMSComponents but not for example ContentPages. You would have to extend the CMSTabParagraphContainer on the backend to also accept ContentPages, ProductPages etc. and then extend the frontend components as well. To extend Spartacus components have a look at: https://sap.github.io/spartacus-docs/customizing-cms-components/
To be honest: This seems like a lot of work if you just want a visual change to the navigation
I am building a react blog app, I am using a functional component where I will be using some internal and external links both. For the internal links I am using Link from react-router-domwhich is working fine but for the external link I am not able to decide will an Link from react-router-dom works, which directs to the path of the external URL or an <a> tag should be fine.
The purpose of using react-router-dom is to navigate to application routes by making changes in the DOM and not reloading the whole page. This scenario is applicable to internal links.
When coming towards external links. It is something that is not the part of our application. We cannot render it our application context. So, a solution to that is using an a tag for external links.
Link is basically a wrapper of an tag with a lot of upside functionalities like,
A can know when the route it links to is active and
automatically apply an activeClassName and/or activeStyle when given
either prop.
The will be active if the current route is either the linked
route or any descendant of the linked route.
To have the link be active only on the exact linked route, use
instead or set the onlyActiveOnIndex prop.
Read the rest at https://knowbody.github.io/react-router-docs/api/Link.html
You can use the anchor tag if you plain something plain. use Link for ease of use.
I'm trying to build a simple web app with VueJS. Until now, I've been able to follow the documentation.
My Problem
I want to implement a generic page template that fetches the page metadata from my database.
However, pages are at the top-level of the navigation (/), so I can't use Vue route parameters to dynamically fetch the content from my database, because some of the pages have their own templates.
What I've Considered...
I've considered doing the following to get around the problem:
Implementing top-level parameter like this...
{ path: '/:slug', component: User }
..but this doesn't work for some reason.
Using a slot in the page component for the custom content, and just creating a new component for every page, but I want to stay DRY.
...but I don't want to have to create a new component for every page.
My Question
How do you implement top-level paging with a database backend in VueJS? Am I missing something simple here?
My app can be considered as a collection of Sections and Subsections. My end goal is to have a shell with the main navbar mapped to each Section and another 'sub' navbar beneath that is a tabbed navigation mapping to the Subsections of the currently selected Section. I also don't (yet?) have a need for a page to show for any Section; that is, only one of the Subsection pages is shown when you navigate to a Section.
In the previous version of Durandal, I retrieved all the current users' available (based on permissions) Sections and Subsections after logon. I then added each individual Subsection as a route using the mapRoute function on the router. I also extended the router with observable collections of Sections and Subsections, which were bound to the shell navbars.
For Durandal 2.0, how do I bind elements on the shell to a child router? Do I and can I create all the necessary child routers as soon as my logon operation is complete and I have the list of all Sections and Subsections that are available to the user?
Please let me know if this question doesn't make sense or needs more information. Thank you.