How Does Github Change the Url But Not the Reload

How does GitHub change the URL but not the reload?

It uses the new push/pop state functions in the history manipulation API.

How does GitHub change the URL without reloading a page?

They use the history API, or specifically, history.pushState().

You can use this, jQuery is not required, but there are plugins such as history.js.

This works on most browsers, namely Chrome, Safari and Firefox. IE10 and above supports this. In older IEs, you can fall back onto using the hash (window.location.hash).

GitHub also blogged about this.

Why is a Github page url changing on load, causing the public resource path to be incorrect?

It's a bit difficult to say without seeing your code.
However it's likely that your react-router is not setup properly.

You should setup your router like this:

import { BrowserRouter as Router } from ‘react-router-dom’;

const routerBaseName = process.env.PUBLIC_URL;

ReactDOM.render(<Router basename={routerBaseName}>< App /></Router>, document.getElementById(‘root’));

Note the basename part - it should be set to your production url when you build the bundle (in this case: https://CBreakr.github.io/ATTCK_StarWars/)

it should be set to your localhost url when you are developing locally.

You can use .env files to set values for PUBLIC_URL (I believe with create-react-app you will have to change it to REACT_APP_PUBLIC_URL) for dev/prod environments respectively, see: https://create-react-app.dev/docs/adding-custom-environment-variables

How to rewrite URL without refresh, like GitHub.com

XMLHttpRequest is used on the client-side in Chrome/Webkit browsers to fetch server-side resources without page refreshing, and content is dynamically loaded in, and animations can be hooked in during that content being appended.

I'm not sure exactly why only Chrome is targeted by the ajax, as usually the hash mark changes when ajax is applied in the same manner ( like twitter ).

For the url changing dynamically, I believe all that's done is location.href is updated. On second thought, it could be some new HTML5 feature that only chrome supports.

URL changes but coponent does not reload

You should move your <Header /> into Router,

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Router>
                <Header />
                  <p className="App-intro">API response</p>
                    <div>
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/formations" component={Formations} />
                            <Route path="/experiences" component={Experiences} />
                        </Switch>
                    </div>
                </Router>
                <div className="bottomPage">
                    <p>down page</p>
                </div>
            </div>
        );
    }
}

Remove the <Router> from BM component,

class BM extends React.Component {
  render() {
    return (
      <Menu>
        <li><Link to="/" className="menu-item">
          Home
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/experiences" className="menu-item" >
          Expériences
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/formations" className="menu-item" >
          Formations
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/loisirs" className="menu-item">
          Loisirs
        </Link></li>
      </Menu>
    );
  }
}

Demo

GitHub pages are not updating

I had an empty CNAME file. Check that if you're having a similar issue.

How do I achieve the GitHub browse repo effect (update URL without refreshing the page)

what you want is watch this screencast: http://railscasts.com/episodes/246-ajax-history-state

in combination with jQuery UI effect "slide" - http://docs.jquery.com/UI/Effects/Slide

good luck!

How to change browser address bar without reloading page - HTML/Javascript

By using:

window.history.pushState("string", "Title", "newUrl");

This is new in HTML 5.

Your url will change to newUrl without reloading the page.

Note: title arg in the method will not change the Title of the html page. This is used to name the page in the browser history, incase u go back and then go forward.

Change url with javascript without page refresh

It's not possible to change the url. That would be a huge security flaw. I can't find any ajax at github, the page reloads, and a new url is displayed. The only part of the url that can be changed with javascript is the hash-part.

---

Related Topics