html5-history

historyApiFallback doesn’t work in Webpack dev server

by

I meet the same question today. let config in webpack.config.js: output.publicPath be equal to devServer.historyApiFallback.index and point out html file route。my webpack-dev-server version is 1.10.1 and work well. http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option doesn’t work, you must point out html file route. for example module.exports = { entry: “./src/app/index.js”, output: { path: path.resolve(__dirname, ‘build’), publicPath: ‘build’, filename: ‘bundle-main.js’ }, … Read more

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

by

You can check location.key if you have a location key that means you routed in-app. But if you don’t that means you come from outside of the app or you just open the app in a new tab etc. import { useHistory, useLocation } from “react-router-dom”; const history = useHistory(); const location = useLocation(); <Button … Read more

Unexpected token < error in react router component

by

The “unexpected token” error can show up for a number of different reasons. I ran into a similar problem, and in my case the problem was that the script tag to load the generated bundle in the html was like so: <script src=”https://stackoverflow.com/questions/29718481/scripts/app.js”></script> When navigating to a route with a parameter (same thing will happen … Read more

Change URL without refresh the page [duplicate]

by

Update Based on Manipulating the browser history, passing the empty string as second parameter of pushState method (aka title) should be safe against future changes to the method, so it’s better to use pushState like this: history.pushState(null, ”, ‘/en/step2’); You can read more about that in mentioned article Original Answer Use history.pushState like this: history.pushState(null, … Read more

Appending parameter to URL without refresh

by

You can use the pushState or replaceState methods, i.e. : window.history.pushState(“object or string”, “Title”, “new url”); OR window.history.replaceState(null, null, “?arg=123”); Example with argument: var refresh = window.location.protocol + “//” + window.location.host + window.location.pathname + ‘?arg=1’; window.history.pushState({ path: refresh }, ”, refresh);

Good tutorial for using HTML5 History API (Pushstate?) [closed]

by

For a great tutorial the Mozilla Developer Network page on this functionality is all you’ll need: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history Unfortunately, the HTML5 History API is implemented differently in all the HTML5 browsers (making it inconsistent and buggy) and has no fallback for HTML4 browsers. Fortunately, History.js provides cross-compatibility for the HTML5 browsers (ensuring all the HTML5 browsers … Read more

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

by

If you want it to work in browsers that don’t support history.pushState and history.popState yet, the “old” way is to set the fragment identifier, which won’t cause a page reload. The basic idea is to set the window.location.hash property to a value that contains whatever state information you need, then either use the window.onhashchange event, … Read more