i am trying to show the user a payment popup as soon as he clicks on a payed object.
But after he pays he should directly enter the content he clicked on.
Therefore i think its a good solution to solve this with the router, because i want every link on the page that redirects to this content to show this popup.
My problem is i want to show the popup before redirecting the user.
So i tryed the onBeforeAction hook and stuff but everything working with the iron router seems to only hook in after the URL of the browser changed and the current template was unloaded.
Do you have an idea how to get this kind of behavior?
Cheers
Based on this answer, here is how you can hook the router using Router.onStop():
// onStop hook is executed whenever we LEAVE a route
Router.onStop(function(){
//check if the current route is the page from where you need to show your
//popup and show it based on, for instance, a session variable containing
//the previously clicked content id.
});
It's a common use case that I don't think is directly achievable within the iron router framework at present (although I would be delighted to be corrected!). As you've discovered, onBeforeAction is run before the page has rendered but after the new route has been run, so the old page has already disappeared.
Effectively, you're looking to queue the running of a new route until a certain action has been completed. The use case for which I've experienced this requirement is page transitions, for which the best solution appears to be to do completely the opposite of what you propose: i.e. to add the logic to an event attached to the link, and only redirect to the new route once that logic has been satisfactorily completed (i.e. the popup has been closed in your case).
I agree that doing something in the router would be a sensible way to approach this, but I'm not sure it's possible in iron router as things stand. Note that this has already been raised though!
Will this workshop?
'unload - runs just once when you leave the route for a new route.'
From
https://github.com/EventedMind/iron-router/blob/devel/DOCS.md#unload-hook
Related
How to replicate the Youtube/Instagram functionality, when user clicks the browser back button, he is redirected to the previous page with the same data and scroll position (without reloading the data)?
What tool/packages can be used and what the whole process would look like.
I tried to search for possible solutions but couldn't find any helpful results.
If you're using #angular/router for navigation, the RouteReuseStrategy interface is what you're looking for.
Specifically, the shouldreuseroute method will let you configure if you want to reuse some route; this will prevent the route's mapped component (the component loaded when this route is activated) from being destroyed after user navigates away from this route (or from this page). If a route is configured to be reused, the corresponding page component will be cached and will be displayed as-is, the next time this route is hit.
If you do not want to use this approach or if you do not use #angular/router, another (dirty, less preferred) approach would be to cache your data and scroll position to an Angular Service which is declared in the AppModule (so that it does not get destroyed when you switch components or modules) and is injected in the component whose data you want to preserve.
But I'd go for the first approach.
A tutorial for RouteReuseStrategy:
https://medium.com/javascript-in-plain-english/angular-route-reuse-strategy-b5d40adce841
I am having an issue with navigation blocking in React.
I use React + Redux with React Router. I have been using the component in order to prevent navigation from incomplete forms within React. This works fine as long as the navigation is actually within React. What it doesn't block, however, is navigation via URL entry, or clicking on an external hyperlink.
Is there an accepted method in React for handling external hyperlinks and blocking navigation outside of React?
You didn't provide any code here, so I'm trying to guess. If I understand you correctly, you are able to manage you internal redirects thought the React app via react-router without any issues.
As per your statement:
What it doesn't block, however, is navigation via URL entry, or clicking on an external hyperlink.
Let's tackle both questions. First can't prevent a user from going to the navigation bar and enter a new URL, that done by design on the browsers side, it would be bad for the user, and of course invasive!
But regarding your second question about clicking on a link that will send you outside your domain or application, you can do something about it.
You have multiple options here, I will give you three:
First: Use history.block
You can block or better said, ask the user to acknowledge the transition to another page by using history.block
As an example from the history docs:
const unblock = history.block('Are you sure you want to leave this page?')
Second: Use history.push instead of href
Just don't use anchor elements href, but rely on the history of react-router.
You can read more about it here: react-router/history
But basically you can wire your redirection using the push method from history, which will look something like:
onClick() {
//code to control if you want to redirect or not
history.push('http://yoururl.com');
}
Third: Use Redirect component with conditional rendering
Then you have other options like for example using conditional rendering combined with Redirect components, but the other approach would be enough to solve your problem.
I think you are looking for Blocking Transitions under the history api for React Router.
As per the example on react router history github page:
You can register a simple prompt message that will be shown to the user before they navigate away from the current page.
const unblock = history.block('Are you sure you want to leave this page?')
Detailed info at https://github.com/ReactTraining/history#properties
Heyo everyone,
story time - skip if you don't care
I'm just starting out with Meteor + Polymer using Synthesis by #aruntk and I'm very happy about the results and greatful for the time he's invested in this project. There's one issue I'm having though.
I've previously only changed a iron-pages object to change the content of my view. Putting that in a FlowRouter like FlowRouter.route("/", action: {ironpages.select("home");}); works just fine. However, my site is getting more complex and I want to rerender a whole section now. I'm being told to do it reactively which is (to my poor understanding) the preferred way of building Apps here.
tl;dr - skip to here if you don't care about stories
So what I did is just putting mwcLayout.render("test-layout",{"main":"yas-manual-page"}); in my Router action. However, I have to reload to make the changes visible which is not what I want.
the router action is being called when changing the URL
the mwcLayout.render() call works if I reload the page once in the initial building of the site
calling mwcLayout.render() again at a later point does not do anything
I've read up on the topic and people say it's a problem with single-page apps and not building it reactively and whatnot, but I have no idea how this is not reactive. It's reacting to the URL change.
Please, if you have a minute, share some insight with me, I'm really stuck. :slight_smile:
Have a wonderful day y'all!
disclaimer: it's a repost form the Meteor forums which suggests coming here instead.
This behavior is added as a feature of mwc layout to prevent multiple re rendering during each route change. Workarounds here are to create another mwc layout or to set third argument forceRender. From the mwc:layout docs
forceRender
In mwc:layout we dont re render the layout unless the new layout is not equal to the current layout or forceRender argument is set. This is to prevent unwanted rerendering while changing routes(even if you change a param/queryparam the route gets rerun so does the render function written inside FlowRouter action). forceRender comes in handy when you have to change the rendering while keeping the current layout.
...
<mwc-layout id="demo-landing">
<div region="header"></div>
<div region="main"></div>
</mwc-layout>
...
imports/startup/client/router.js
...
action:function(params,queryParams){
mwcLayout.render("demo-landing",{"main":"test-layout1","header":"test-header"});
}
...
Now if you try
mwcLayout.render("demo-landing",{"main":"test-layout2","header":"test-header"});
from console it wont work since layout is not changed and forceRender is not set.
This works->
mwcLayout.render("demo-landing",{"main":"test-layout","header":"test-header"},true);
The emberjs docs say the following.
Note: A route with a dynamic segment will only have its model hook called when it is entered via the URL. If the route is entered through a transition (e.g. when using the link-to Handlebars helper), then a model context is already provided and the hook is not executed. Routes without dynamic segments will always execute the model hook.
How do I get the dynamic segment routes setupController code to execute every time. This seems to be an on going issue; see here.
The first time my code works. I press a button and everything executes as expected. But if I press the back button then press my application's button, there is information missing. Then if I refresh the page, everything is working again.
I populated an array to be displayed along side my model info. But when I navigate to that page via link, or press the back button, the array of information seems to be empty. I added some console.logs and it looks my code is getting executed but when it comes to the template displaying the contents of the array, it is empty.
The solutions that have been raised talk about afterModel functions however, the logic that I need to execute (more then the first time it is loaded) is in a setupController function. Other solutions I saw involve complex helpers that seem to be over kill for just executing code every time a user hits a specific route.
So basically, how do you force dynamic segment routes to act like it was entered through the url bar?
Any help would be greatly appreciated.
So I have a set of navigation links at the top of my page.
One of them links to a list of hardware the users owns showing name and description.
I click the nav link and my list of hardware if rendered fine.
Go into database, change the name of one of the hardware pieces.
Now i click the nav link again on the page. I would expect backbone to
render the page again. But it doesn't.
I have a message print to the console every time render is called. The second click does not run the render function on the view.
I imagine backbone prevents re rendering the view or calling events when a route that is already open is activated. Is there any way to get it to rerender the already open view when I click on nav link a second time?
You are correct that Backbone prevents a route from triggering if it's already on that route.
There are a few solutions.
You could forcefully trigger the route by hijacking the links and calling router.navigate("route/path", {trigger: true});.
Or, even better, avoid triggering the router and use an api object. It's something Derick Bailey has written about here. Every click after the first would use the api to re-run the render code, bypassing the Backbone router. You can see a more advanced use of this method in the bbclonemail app.