In my play webapp, web I click back button of browser, the URL changes but the page does not change. Similarly when I click the front button, after navigating back, the URL keeps changing but the webpage remains the same.

So if I am on localhost:9000/A/B/C/D and I click back, the URL will change to localhost:9000/A/B/C but the webpage remains the same. I checked the network in browser console and no request is being sent to the router/backend. On reloading the page, the webpage expected from a particular URL loaded.

To solve this issue I added a javascript file which listens to the event popstate and everytime I press back(The URL chanegs) and it reloads the page from the URL.

By doing this a request is sent via the Router and which is expected to be seen gets loaded. This however is causing me problem. When I do this, the front button of the browsers gets greyed out. window.history.forward(1) gives me undefined. Similar is the case with window.history.back(-1).What should I do? Please help.

My play framework project flow looks something like this:

routes

GET         /person/:height            controllers.ViewController.person(height: Int)

controllers.ViewController.person

def person(height: Int): EssentialAction = cached.apply(req => req.path, cacheDuration) {
    withoutLoginAction { implicit loginState =>
      implicit request =>
        Ok(views.html.person(Option(height)))
    }
  }

person.scala.html

@import controllers.actions.LoginState
@import controllers.view.OtherApp

@(personHeight: Option[Int])(implicit requestHeader: RequestHeader, messagesProvider: MessagesProvider, otherApps: Seq[OtherApp], loginState: LoginState = null)

@if(personHeight.isEmpty) {
    @views.html.index(Option(constants.View.BLOCKS))
} else {
    @views.html.index(Option(""))

    <script>
   componentResource('explorerContent', jsRoutes.controllers.ComponentViewController.person(@personHeight.getOrElse(1)))
    </script>
}

Longer description of what is happening:

URI: http://localhost:9000/person/height/78478

1. On clicking back URI changes to

URI: http://localhost:9000/person/height

But the webpage remains same.

2. On clicking back again:

URI: http://localhost:9000/person

But webpage is still same.

3. On clicking forward:

URI: http://localhost:9000/person/height

and webpage is still same