Reactjs SPA - Pressing IOS Safari back button updates the url but not the component view

Asked
Active3 hr before
Viewed126 times

9 Answers

componentbuttonreactjs
90%

But in Safari, as the user presses back button, url is changing in the browser but the component view is not.,We have a reactjs SPA application where we want to navigate back and forth using browser back button/swipe the screen, if on Mac., AFAIK if you BrowserRouter from the latest react-router it comes with the functionality of pressing the back button out of the box. They have an example here – sudo97 Feb 7 '20 at 22:26

I had to remove the same listener on component Unmount.

componentWillUnMount() {
   window.removeEventListener('popstate', this.handleBackButton)
}
88%

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Create a top-level <Route> in <BrowserRouter> that matches all URLs (/) and render App component.,Get history object by wrapping App component with withRouter higher-order component,Recall that we are using a withRouter higher-order component and that we already have access to the history object. Below is a simplified version of our new code.

The app has a global listener that listens to popstate, and moves the user forward whenever the user has navigated back using the navigate back event.

// Hey, a popstate event happened!window.addEventListener("popstate", e => {  // Nope, go back to your page  this.props.history.go(1);});
load more v
65%

Safari has a weird “quirk.”,If you navigate from one page to another in a web app, and then click the back button, Safari loads the entire previous view as a cached version of it’s previous state rather than refreshing the content.,I think this is a performance trick in Safari to make web pages load faster when jumping forwards and backwards through browser history.

/**
 * If browser back button was used, flush cache
 * This ensures that user will always see an accurate, up-to-date view based on their state
 * https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked
 */
(function() {
   window.onpageshow = function(event) {
      if (event.persisted) {
         window.location.reload();
      }
   };
})();
75%

I am facing an issue where changing my URL (or pressing back button on browser) does not have any affect on my components. I am using react-router-redux (version ^5) and react-router (version ^4).,However, what happens is that the url only changes when you click something on the NavBar. Changing the URL by yourself does not change anything (or pressing back button). I have researched this online and also set-up withRouter when connecting my container to my components but it did not help.,Dispatch a push from react-router-redux to change the url/component when a user clicks something on the side NavBar

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
load more v
40%

React updates the Virtual DOM relative to the components marked as dirty (with some additional checks, like triggering shouldComponentUpdate()),React keeps a copy of the DOM representation, for what concerns the React rendering: the Virtual DOM,But what if you want to access the DOM element that a React component represents?

Pretag
 Pretag team - issue, fix, solve, resolve
22%

Optimize your pages for instant loads when using the browser's back and forward buttons. ,As web developers, it's critical to understand how to optimize your pages for bfcache across all browsers, so your users can reap the benefits.,The most important way to optimize for bfcache in all browsers is to never use the unload event. Ever!

window.addEventListener('pageshow', function(event) {
   if (event.persisted) {
      console.log('This page was restored from the bfcache.');
   } else {
      console.log('This page was loaded normally.');
   }
});
load more v
60%

On iOS, visitors can install the PWA using Safari's Share button and its Add to Homescreen option. On Chrome for Android, users should select the Menu button in the upper-right corner, followed by Add to Home screen.,Once installed, the app appears in its own window without an address bar:,Later, the user progresses to installing it in their OS and enabling push notifications.

Use the following command to create a PWA project in a command shell with the --pwa switch:

dotnet new blazorwasm - o MyBlazorPwa--pwa
load more v
48%

I'm working on an SPA using React/React-Router/Redux. I'm trying to utilize the window.onpopstate object to control the browser's back button and have it move the user back an entry in the router's history.,As near as I can figure out yes. It doesn't appear that React Router has anything built in to handle the browser's back button, but if I'm mistaken could you please direct me to the proper place in the documentation?,I've tried some variations on the action creator too, as follows:

Within the main component I've got:

  componentDidMount = () => {
     window.onpopstate = this.props.handleBackButton;
  };
load more v

Other "component-button" queries related to "Reactjs SPA - Pressing IOS Safari back button updates the url but not the component view"