I have a Checkout page which after a form submission takes you to an Order page. If the user clicks the browser back button on the Order page, then instead of taking them back to the Checkout page I need to redirect them to their Account page. How can I do this with React Router 4?
I found this question but it seems out of date:
Intercept/handle browser's back button in React-router?
I can think of 2 approaches:
1 In Checkout on componentDidMount see if the previous URL was /order. If it is then perform a redirect.
2 In the Order component intercept the back navigation command and instead redirect.
I would prefer option 2 as the behaviour is residing in the component which it will be called from, and the Checkout component does not need to be mounted. However I'm not sure if browsers allow you to edit these things?
You'll need to manipulate the react-router history. You can either use the history library or the Redirect component. This post explains it well: https://tylermcginnis.com/react-router-programmatically-navigate/
Related
I've been working on a bookmarklet that performs some logic and then redirects the user to a different page. I'm running into an issue where, after the redirect, Chrome is replacing the icon of the bookmark with the favicon from the target of the redirection.
I'm trying to preserve the original icon on the bookmarklet and so am wondering if there is any way that I can prevent this behaviour?
As an example. Bookmarklet starts off looking like this:
If the bookmarklet were to redirect the user to Stack Overflow then on clicking the bookmarklet icon is replaced:
I've tried a couple of approaches to perform the redirect, all of which have this behaviour:
Bookmark is a link to a server-side page that performs the redirect by returning a 302 with a Location header
Bookmark is a link to a server-side page that executes JavaScript on page load that performs the redirect using window.location.replace
So far I have a couple of other approaches which avoid this particular issue, but have other downsides of their own:
Bookmark is a link to a server-side page that executes JavaScript on page load to perform the redirect using window.location.assign - if user click the back button they are taken to my page which then redirects them again, and can result in the user getting stuck in a loop
Bookmark is a javascript: link which makes a fetch request to perform logic in the background and then goes to the target page using window.location - this works OK, except for on a new blank tab where JS bookmarks are no longer allowed.
It should be possible to prevent the replacing of favicon for some time for a redirect,by configuring the caching time:
* https://web.dev/service-worker-caching-and-http-caching/
* https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers
I am developing an application using React/Redux. The application reads from a Json file and saves changes back to the json file.
Its a two page application but I am not using any router. All the editing and saving part is done on the second page, where I am hiding the home page.
My problem is that whenever I am saving something it goes back to the home page, which I know is the default behavior as the source is getting updated. So it is re-rendered. I am using different action for the second page rendering.
But what I am looking for is a simple solution for it to stay on the second page where I can show a success message that the data was saved.
"Where you are hiding the home page" - this suggests you are looking for clientside routing, for which react router would be the normal option: https://github.com/ReactTraining/react-router. You can also look into doing it purely with hooks: https://blog.logrocket.com/how-react-hooks-can-replace-react-router/
I have a Route who's only job is to display an iframe.
The path changes in the iframe are added to the browser history which allows a user to go back and forward.
Is it possible to enter the Route that contains this iframe without adding to history?
I am thinking something like:
<Route component={MyComponent} onEnter={location.history.pop}>
I am using React Router v4
I use Polymer starter kit to build my app. I removed the hashbang in the urls.
I am trying to build a login screen and after successful login, I want to change the page to default route. To do this, I have a listener in app.js for successful log in. On successful log in, I change the route which causes page refresh. I tried multiple options:
location = 'entireUrl'
location.pathname = '/route'
location = 'route'
All the options causes page refresh. Is there any way to code this without causing page refresh. Shouldn't page.js catch this and do the routing without page refresh?
For those looking for an answer, I fixed it by calling page.redirect('/route').
note: page.redirect will replace the browser history. If you want to retain browser history you can use page.show('/route')
Can I use my HTML form to perform multiple actions?
Post the information to another destination.
Navigate a user to another page once they submit the form.
At the moment I can post the filled form to the destination but cant navigate the user to another page using HTML specifically. Is there any method in HTML to do this?
Any suggestions?
Things are easy if you control the server and/or are on the same domain, then you can do a server side redirect. But since you are using salesforce surely you don't control that. Nevertheless, double check their documentation for a redirect option you can put in the form.
If that fails, one thing I'd try is to submit it to an iframe: add <iframe name="foo" id="foo"></iframe> somewhere to your html (you can hide it too if you want) and add target="foo" to your form. Then, also add an onsubmit javascript handler to the form that redirects after a delay to allow the form to be processed. The timing of the delay is likely to be a source of bugs btw, checking for errors in the submitted form can't be easily done across domains, you'd be guessing. Maybe an onload handler on the iframe can do the redirect though, I'm not sure, but worth a try.
This isn't guaranteed to work either, some sites don't like being in iframes. If that fails, you might try setting target="_BLANK" to submit the form to a popup window then redirect your main window using javascript or something. This will require you to give an instruction to the user to close the window.
Lastly, if you can submit the data via a server side API call to salesforce, that would be good too because then the plain redirect option is back under your control.
You can use redirect after you perform whatever you are going to do on the first page (the one from form action)