# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stratox.wazabii.se/router/dispatch-states-navigate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.