# Dispatch States (navigate)

### Push States

The library provides intuitive navigation options to seamlessly transition between pages and initiate GET, POST, PUT and DELETE requests.

#### Page Navigation / GET Request

Initiating a GET request or navigating to a new page is straightforward. Such actions will correspond to a get router, with the request parameter converting into an instance of `URLSearchParams` for the request.

**Arguments**

* **path** (string): Specifies the URI, which can be a regular path or a hash.
* **request** (object): Sends a GET request or query string to the dispatcher. This will be transformed into an instance of `URLSearchParams`. When executed in a browser, the query string will also be appended to the URL in the address field.

**Make GET Request**

```js
// URI hash (fragment with hashtag) navigation
dispatch.navigateTo("#articles/824/hello-world", { test: "A get request" });

// URI path navigation
dispatch.navigateTo("/articles/824/hello-world", { test: "A get request" });
```

**Note**: You can access the container inside all your controllers and component views, meaning you can also access the dispatch!

**The Navigation Result**

The above navigation will trigger the result for the matching router:

```js
// GET: example.se/?test=A+get+request#articles/824/hello-world
router.get('/articles/{id:[0-9]+}/{slug:[^/]+}', function({ http }) {
    const id = http.vars.id.pop();
    const slug = http.vars.slug.pop();
    const test = http.request.get.get("test"); // Get the query string/get request "test"
    console.log(`Article ID: ${id}, Slug: ${slug} and GET Request ${test}.`);
});
```

#### POST Request

Creating a POST request is similarly efficient, targeting a post router. The `http` parameter will be an object to facilitate the request.

**Arguments**

* **path** (string): Defines the URI, which can be a regular path or a hash.
* **request** (object): Submits a POST request to the dispatcher. This will be an object, allowing for detailed and structured data transmission.

**Make POST Request**

```js
dispatch.postTo("#post/contact", { firstname: "John", lastname: "Doe" });
```

**The HTTP POST Request Result**

The above post will trigger the result for the matching router:

```js
// POST: example.se/#post/contact
router.post('/post/contact', function({ http }) {
    const firstname = http.request.post.firstname;
    const lastname = http.request.post.lastname;
    console.log(`The post request, first name: ${firstname}, last name: ${lastname}`);
});
```

#### PUT and DELETE

You can of course also make PUT and DELETE requests.

```js
// PUT - Like POST, it will pass arguments as parsed body
dispatch.putTo("#post/contact", { firstname: "John", lastname: "Doe" });

// DELETE - Like GET, it will pass arguments as query string
dispatch.deleteTo("#post/contact", { id: 98862 });
```

### What is Really Cool

What is really cool is that if you have bound the Stratox Fetch library to the main or to a router that matches the request method and the state path, it will actually also make an Ajax fetch request as specified!

**Example of Ajax Fetch Request for Routes**

You can bind an Ajax fetch request directly to a route. Here's how it works:

```js
// Binding the fetch request to the router
router.put('/contact', [PagesController, "contact"], {
    url: "https://example.se/backend-location/", // Main URL
});
```

In this example,  the state will be `/#contact` , show the right controller page and will also make a PUT ajax request with the Fetch API to the specified URL and router path (`https://example.se/backend-location/contact`). 

This demonstrates how easy it is to integrate asynchronous data fetching within your Stratox application, making your routes even more dynamic.