CODEWITHSUNDEEP
javascriptrouteshistory.jshtml5-historyhashchange
AlphaG33k
AlphaG33k

Reputation: 1678

History.js usage for single page applications

I am in the process of building a single page application, I wish to use History.js for managing the applications state. I have it working as desired as far as working with clicking the links and the view being routed accordingly. The issue is when the I refresh the screen with a url route change in place. I know that the reason this is happening because is because my server is capturing the / and attempting to find the directory on the server. I never ran into this issue before using #! or # to separate the client side params.

app.html/madeUpPage/

My server is trying to find the madeUpPage directory when the refresh or entry via link happens. How do you get around this in a client side single page application with HistoryJS?

The client loads index.html and the scripted contained within it parses the params and executes as expected with this configuration of url: app.html#madeUpPage

I have tried History.options.html4Mode = true and also window.History = { options: { html4Mode: true} } however with History.js v1.8b2 this doesnt seem to work for me.

'use strict';
window.History = {options: {html4Mode: true} };
require(['js/client-config.js',
         'js/lib/history-nativejs.js',     // History.js in raw JavaScript, very nice 3rd party utility... used for routing
         'js/lib/libweb-ui.js',
         'js/lib/libweb-ajax.js', // LibWeb ajax
         'js/lib/libweb-jsml.js', // This is the file needed for JSML to run, parse and render your application (main core file)
         'js/model.js',
         'js/portfolio.js', // Main class containing viewstate 
         'js/global.js', // The global view model shared for all views in the SPA
         'js/index.js',  // The initial payload required to load the default application content (index/default.js)
         'js/router.js',
         'js/layout.js',
         ], // This takes the raw JavaScript objects places them how they will appear in the layout (the "master page")


          function coreScriptsLoadedSuccess() {

            require(['js/controller.js'], function(){

              var appController = new PortfolioClientController(defaultAppState);

              require(['js/events.js'], function domLoadSuccess(){
              });

            });
});

I also tried this thread: Force html4 fallback in history.js

Thanks to anyone who can offer some help.

Upvotes: 0

Views: 1105

Answers (1)

AlphaG33k
AlphaG33k

Reputation: 1678

Putting a ? in the URL via history JS on pushState is what solved this issue!

So instead of..

**Before**

click (()=> History.pushState({ 
             route: route 
           }, document.title + ' '+ route, 
           route);
**Now**

click (()=> History.pushState({ 
             route: route 
           }, document.title + ' '+ route, 
           `?view=${route}`);

Upvotes: 1

Related Questions