# Routing

## History

### Push State / Replace State

* The url will change, but the html doesn't be changed

#### pushState(state, unused, url)

* state: put the object data to this page
* unused: always give empty string is okay
* url:  for changing url to the browser without going to new page
* replace vs push: create new url to the history or not

<pre class="language-javascript"><code class="lang-javascript"><strong>
</strong><strong>window.history.replaceState(
</strong><strong>    {test:3},
</strong><strong>    "",
</strong><strong>    "https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState?diu=3"
</strong><strong>);
</strong><strong>
</strong><strong>// get back the state
</strong>console.log(history.state);
// {test:3}
</code></pre>

## Location

### Information

* host: the hostname + port number
* hostname
* pathname: /xxx...
* search: ?...., used to assign additional data to the page and can be displayed to the user
* hash: #..., represent the fragment section of the page and change the hash without full page loading
* href : the full url

### Method

```javascript
// replace the topmost history stack
window.location.replace("...")
// push the top history into history stack
window.location.href = "..."

// xxx.com?campaign=instagram&popular=true
let params = new URLSearchParams(location.search);
params.get("campaign"); // "instagram"
params.get("popular"); // "true"
params.toString(); // "campaign=instagram&popular=true",
```

