# Routing

{% hint style="info" %}
Note: In this section, we will only talk about [AppRouter()](/boltui-docs-preview/api-reference/boltrouter/approuter.md) and [AppLink()](/boltui-docs-preview/api-reference/components/applink.md) to cover a basic overview, and not complications. For other methods, checkout the bolt router API reference
{% endhint %}

Routing is important for apps because we cannot just have all our data in one page, and different pages helps in organizing content is a well manner, but bolt being a client side framework as of now, it is a bit tough to implement routing.

Since routing is indeed an imporant aspect of an application, bolt decided to create an efficient router beforehand because web developers should use their time on building UI and logic and not something that was left behind by the framework developer.

We will learn this by example, so let's establish some basic pointers

{% tabs %}
{% tab title="Home Page" %}
Here we will show some basic stuff like about page
{% endtab %}

{% tab title="Users" %}
Here we will show some user
{% endtab %}

{% tab title="Popular Languages" %}
Here we will show some popular programming languages of 2022
{% endtab %}
{% endtabs %}

Now that we have defined how we are going to structure our site, let's dive right into it!

For this, we will use [AppRouter()](/boltui-docs-preview/api-reference/boltrouter/approuter.md) to define a view which will respond to route changes, and [AppLink()](/boltui-docs-preview/api-reference/components/applink.md) to change the url to navigate to the specified pages.

```javascript
function Home() {
    return p()
}

function User() {
    return p()
}

function Popular() {
    return p()
}

function MyApp() {
    return AppRouter("", 
        Url("/home", Home),
        Url("/users", User),
        Url("/popular", Popular)
    )
}

render("app", MyApp())
```

Here you can see that I have returned the AppRouter without binding it to any state, or inside any div, because Router by default binds to the url state of the browser itself and also returns a div, inside of which each of the views are show according to the url the user is in.

Here, you can also see I have nested [Url()](/boltui-docs-preview/api-reference/boltrouter/url.md) functions, which simply maps views to specific routes, like for Home, we are mapping the Home function, which is a view.

But here we used the views as callbacks, because of the fact that each of the view is actually callback, and not some sort of function, this is because we can pass properties to them when using the [AppLink()](/boltui-docs-preview/api-reference/components/applink.md) function

Let's create a navigation bar to help us navigate the views

```javascript
function Home() {
    return p()
}

function User() {
    return p()
}

function Popular() {
    return p()
}

function MyApp() {
    return div(
        div(
            AppLink("/home", p("Home")),
            AppLink("/users", p("Users")),
            AppLink("/popular", p("Popular"))
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())
```

Here as you can see, we are using the AppLink() function, passing the url as first variable and second variable as the child element, which is a paragraph, and when it is clicked, we can simply navigate to those views. There is also a third variable, which is used for variables, and we will discuss it in a moment.

Now we do have a working router, let's fill those views with data to see the effect

```javascript
function Home() {
    return p("Welcome to Home Page")
}

function User() {
    return div(
        p("Name: Mayukh"),
        p("Age: 17")
    )
}

function Popular() {
    return div(
        p("Some popular programming languages:"),
        p("1. Javascript"),
        p("2. Python"),
        p("3. Java"),
        p("4. C/C++"),
        p("5. Rust")
    )
}

function MyApp() {
    return div(
        div(
            AppLink("/home", p("Home")),
            AppLink("/users", p("Users")),
            AppLink("/popular", p("Popular"))
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())
```

### Passing variables to views

We can pass some variables to the views too! It can depend upon states or any other thing that you might want to implement.

Let's see exactly how we can do that:

```javascript
function Home() {
    return p("Welcome to Home Page")
}

function User() {
    return div(
        p("Name: Mayukh"),
        p("Age: 17")
    )
}

function Popular() {
    return div(
        p("Some popular programming languages:"),
        p("1. Javascript"),
        p("2. Python"),
        p("3. Java"),
        p("4. C/C++"),
        p("5. Rust")
    )
}

function MyApp() {
    return div(
        div(
            AppLink("/home", p("Home"), { name: "Mayukh" }),
            AppLink("/users", p("Users"), { name: "Mayukh", age: 17 }),
            AppLink("/popular", p("Popular"), [
                "Javascript", "Python", "C/C++", "Java", "Rust"
            ])
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())
```

As you can see, we have passed some variables to the third argument, but we need to recieve them to work with them. Here, we can also see that we have passed callbacks as views, that means we simply need to take them as variables in the views. Let's do it then!

```javascript
function Home({ name }) {
    return p(`Welcome to home page, ${name}!`)
}

function User({ name, age }) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

function Popular(languages) {
    return div(
        ...languages.map(( elem, index ) => p(`${index+1}: ${elem}`))
    )
}

function MyApp() {
    return div(
        div(
            AppLink("/home", p("Home"), { name: "Mayukh" }),
            AppLink("/users", p("Users"), { name: "Mayukh", age: 17 }),
            AppLink("/popular", p("Popular"), [
                "Javascript", "Python", "C/C++", "Java", "Rust"
            ])
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())
```

As you can see, it is reacting to the props passed! We can also change this props on the upcoming views, or using states inside the views itself! I suggest you experiment untill something breaks, then simply notify me.

Anyways, I guess here we part ways. I will meet when I have completed this and then you will also have even better version of bolt, and also a comprehensive beginner friendly docs, though I would expect you know somethings.


---

# 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://creatorlabs.gitbook.io/boltui-docs-preview/understanding-bolt/routing.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.