I'm using Next.js with Polaris (from following their guide here). Using Link component imported from either Polaris or Next.js is not updating the url in the embedded app.
While the url path doesn't change, the view does change correctly (i.e. the component for the new path does render). Same result with breadcrumbs and url prop for ResourceList.
Is this expected behavior?
Ended up figuring this out after many variations of trying to make links work correctly.
Answer: no, that's not expected behavior and links should change url path for Shopify embedded apps.
For Polaris, in order to make links change the URL you will need to install this library (#shopify/react-shopify-app-route-propagator). There is enough instructions on the page to figure out how to install it.
Important note on library usage: AppProvider had to be in the parent component for this.context.polaris.appBridge to work correctly. All the logic for context needed to be in a child component. This issue might've been unique to just my case, but maybe not.
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.
When I build my VueJs application, it automatically imports the app.js and chunk-vendor.js files with the preload attribute. This is great as it speeds up the page load time of my application.
I've looked at #vue/preload-webpack-plugin and I can see that I can preload specific webchunks or assets. This has the effect of preloading those files on all routes.
The thing I would really like to do is preload webchunks based on the initial route that is loaded (the first route the user visits).
Lets say I have two routes; home and accounts. Both of these routes are lazy loaded. When a user opens /home as their first page, I would like to preload the js and css webchunks related to the homepage. If the user initially opens the /accounts page, I would like to preload the webchunks related to the accounts page.
Its not possible to use wildcards in preload statements, so I know I can't do this statically.
Any ideas of how this could work? Has anyone heard of such a project being suggested elsewhere?
EDIT: Something I tried as an experiment was injecting preload headers into my index.html file using the beforeRouteEnter method. Whilst I could see the preload header in my DOM, I found that browsers did not observe the header in time, so the image I was experimenting with was not pre-loaded. In any case, this wouldn't have worked for a dynamically named file, but useful to know.
With SSR it is possible and framework like Nuxt does it automatically, because it builds separate html file for each route. So this html can be "tailored" for this specific route and include/preload all the code route needs...
Without SSR it much harder. #vue/preload-webpack-plugin works by injecting preload links into the index.html at build time and since there is only one index.html for a whole app, you can't make it route dependent (with this plugin). So what Vue CLI does is prefetching all the async chunks by default (clearly preferring speed over bandwidth usage)
I can imagine a solution in the form of Webpack plugin, which replaces preload-webpack-plugin and instead of generating preload/prefetch links at build time just generates some inline script with the map of "route name => chunk name" (some well defined naming convention would be needed) that would inject the links dynamically to the DOM base on the current URL. But even with my "googling skills" I wasn't able to find anything like that...
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.
In Gridsome, I am basically looking for Vue's nested route functionality (or Nuxt's child-view) to achieve something like this /:userId/profile and /:userId/posts for example. And since Gridsome uses Vue Router there should be a way to achieve this I believe
Let me try to explain what I am trying to build with Gridsome:
At mywebsite.com/ I want to show a Grid of images showing thumbnails of my video portfolio. When you then click on a thumbnail I want a modal to pop-up showing the video. The modal is semi transparent showing the portfolio in the background. So far so good.
But for people to be able to share the URL of the respective video, I need the path changing to mywebsite.com/video-1 and so on. When I then close the modal the path should be mywebsite.com/ again. This is something I already achieved within Nuxt with <child-view>.
Is there some similar functionality in Gridsome? I appreciate your help.
From the feedback you got here:
Gridsome doesn't support child routes yet. But you can kind of achieve what you want if you create a new content type called User and add each user as a node. Then generate pages for them with the Pages API. The pages you create can share a layout component.
In the same way, you can also generate pages for each video for having direct URLs to them. And use the $fetch() method to load a video in a pop-up. Or just query the videos in the front-page query instead of using $fetch().
How do I navigate to another page within my Elm application?
Specifically, I am trying to navigate from the Home page to the Contributor page.
The Contributor page is located under my Domain folder.
The file structure is below:
- Home.elm
- Domain
- Contributor.elm
I thought I could do something like this:
a [href "Domain/Contributor.elm"] [text "click me!"]
or this:
a [href "Domain/Contributor.html"] [text "click me!"]
However, neither of these paths work.
Note:
The app that I'm working on is NOT a SPA.
You are using elm-live, which is a development server. It targets a single Elm source file as its entry point, so unless your Elm code is built as a single page application, you won't be able to do any navigation to another file (though there is nothing wrong with hard-coding href links that link elsewhere).
elm-live is also only for development. You wouldn't want to run it on a production server.
If you are trying to avoid a SPA and would rather have each Elm file represent the complete functionality for a single page, perhaps you could go with the default functionality of elm make, which generates an HTML file that contains inline javascript compiled from Elm code. This is, in essence, what drives the elm-lang.org website. If you look at the source code, you'll see the html generated by the default elm make command, compiled against each Elm file "page" of the application.
On the other hand, if you are trying to build a SPA, #Bill's answer is a good starting point.
I don't believe you can do the sort of navigation you are trying to do within an Elm app without building a SPA. You are attempting to use the HTML href attribute to navigate. That attribute needs to be a real URL. Without using something like the Elm navigation package, you wont's have support for multiple routes.
Simple navigation in Elm is fairly straightforward. I wrote a blog post on this subject.
Also, here is the github repo that demonstrates the work in this post.