• Routing on SPA vs Traditional web page routing
• History API
• window.popstate event
• history blocking strategy from React Router

Traditional Routing

- 1 URL would be tied to a single page and routing is handled on server side

 

- 'beforeunload' event is fired and this event is cancellable

SPA routing

- handled by the SPA itself

 

- on matching a route, it has to re-render the app itself

 

- URL and document are independent of each other

History API

• Allows us to reuse active document
• It can update the URL and simultaneously add this new URL location into the browser history session
• store a state with a URL location
• has an API 'go()' that allows us to call the browser's back or forward action

History API

• You CANNOT manipulate the history object
• You WILL NOT know the previous locations

popstate event

• fired when the user navigates between 2 history entries for the same document
• event is NOT cancellable
• URL location changes before popstate event is sent
• doesn’t tell us whether the back button or forward button triggered it

History blocking strategy

1. On page load, instantiate an array. This array will be used to track the history location.
   Let the first page we are be index 0
    
2. When popstate occurs, the URL location would have changed. We get the new URL location state and give it
   index + 1
    
3. We are now on the redirected page. Navigate back to current page with go(currentPageIndex - redirectedPageIndex)
    
4. When user wishes to stay on page, no redirection will be called. When user wishes to leave page, go(delta * -1)