Questions tagged [html5-history]

The HTML5 History API allows programmatic manipulation of the browser's history through JavaScript, providing a method of managing the user's history stack when creating web applications.

The HTML5 History API allows programmatic manipulation of the browser's history through JavaScript, allowing interaction with the browser's history as though it is the user.

Useful documentation:

585 questions
301
votes
14 answers

Change the URL in the browser without loading the new page using JavaScript

How would I have a JavaScript action that may have some effects on the current page but would also change the URL in the browser so if the user hits reload or bookmark, then the new URL is used? It would also be nice if the back button would…
Steven Noble
  • 9,304
  • 12
  • 42
  • 56
168
votes
9 answers

Good tutorial for using HTML5 History API (Pushstate?)

I am looking into using the HTML5 History API to resolve deep linking problems with AJAX loaded content, but I am struggling to get off the ground. Does any one know of any good resources? I want to use this as it seems a great way to allow to the…
Mild Fuzz
  • 26,058
  • 28
  • 95
  • 142
66
votes
5 answers

Appending parameter to URL without refresh

I know this has been asked many times before but answers were not descriptive enough to solve my problem. I don't want to change the whole URL of page. I want to append a parameter &item=brand on button click without refresh. Using…
Mina Hafzalla
  • 2,121
  • 7
  • 25
  • 39
62
votes
2 answers

Change URL without refresh the page

I would like to replace an url without page refresh. I need to change: https://example.com/en/step1 to https://example.com/en/step2 How to do that ?
user5878353
51
votes
3 answers

BrowserRouter vs Router with history.push()

I am trying to understand the difference between BrowserRouter and Router of the react-router-dom (v5) package and what difference it makes for my example below. The documentation says: BrowserRouter A that uses the HTML5 history API…
mitchkman
  • 4,963
  • 7
  • 30
  • 55
48
votes
5 answers

Unexpected token < error in react router component

I'm trying to write router component for my react app. I'm create new react class and define some routes in componentDidMount method. This is full method componentDidMount: function () { var me = this; router.get('/', function(req){ …
Sergey Troinin
  • 633
  • 1
  • 7
  • 8
38
votes
4 answers

Page title is not changed by history.pushState

I've just opened a blank HTML page with some little amount of base tags (like html, body, head, etc) in Google Chrome, and tried to execute the following command in console: history.pushState(null, 'my test title', '/test/url'); History events work…
avasin
  • 7,370
  • 11
  • 69
  • 116
37
votes
3 answers

Detect whether HTML5 History supported or not

How can I check if the browser you are using supports the HTML5 history api? As you can see here http://caniuse.com/#search=history only chrome +ff4 and several others supports this and I wish to do something else if they cant support this. How can…
Karem
  • 16,343
  • 69
  • 163
  • 271
29
votes
5 answers

historyApiFallback doesn't work in Webpack dev server

I use Webpack dev server and browserHistory in React Router to manipulate with urls by HTML5 History API. historyapifallback-option does not work in my webpack config file. After refreshing http://localhost:8080/users or…
Matt
  • 6,793
  • 24
  • 89
  • 169
26
votes
1 answer

jQuery bind popstate event not passed

I'm coding a little demo for the History API. And I'm struggling with this: $(window).bind('popstate', function(event) { console.log('pop: ' + event.state); }); It logs 'pop: undefined' when I click on the 'Previous' button... …
Jocelyn LECOMTE
  • 830
  • 1
  • 7
  • 15
22
votes
6 answers

Ajax with history.pushState and popstate - what do I do when popstate state property is null?

I'm trying out the HTML5 history API with ajax loading of content. I've got a bunch of test pages connected by relative links. I have this JS, which handles clicks on those links. When a link is clicked the handler grabs its href attribute and…
And Finally
  • 5,190
  • 14
  • 63
  • 101
21
votes
1 answer

HTML5 history API on iOS Chrome

For testing purposes I want to populate the history with a number of entries. More precisely I want to add X items to kind of disable the backbutton of the browser, since even if the user is clicking X times, he will stay on the same page. I'm doing…
sangrila B
  • 534
  • 1
  • 4
  • 17
20
votes
1 answer

How to unit test a react event handler that contains history.push using Jest and Enzyme?

Given a simple component: export default class SearchForm extends Component { constructor(props) { super(props) this.state = { query: '' } } onSubmit = (event) => { event.preventDefault() …
Darryl Snow
  • 868
  • 1
  • 6
  • 20
20
votes
4 answers

stop firing popstate on hashchange

I am working with the History API and using push and pop state. I want to stop the popstate event from firing in some scenario where I am only appending the hash to URL. for example in some cases on click of anchor it appends # to the URL and…
Kalish
  • 763
  • 7
  • 17
19
votes
4 answers

How to know if react-router can go back to display back button in react app

There seems to be no API way to detect if you can go back from the current page in an app. One can check the history length, but that includes the forward and backward stack. I want to display the back button only when the user actually can go back.
philk
  • 1,615
  • 13
  • 28
1
2 3
38 39