# Navigate between pages

{% hint style="success" %}
The tool used in this guide is [MERN.AI](https://mern.ai/). You can download the free version by clicking [here](https://mern.ai/download).
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=liuCxeZEHdA>" %}
Navigate between pages
{% endembed %}

## Setting Up Pages

1. Create two UI files named `page1.tsx` and `page2.tsx`, with corresponding paths '`/page-1`' and '`/page-2`' respectively.
2. Update the content in each page for better understanding.

> For example:

{% code title="page1.tsx" %}

```tsx
import React from "react"

export default function Component(props: any) {
    return <div>Hello World from page 1</div>
}
```

{% endcode %}

## Navigating Between Pages

{% hint style="info" %}
To enable navigation between the pages, we need to create a button wrapped inside the `Link` component provided by MagicJS. Let's follow these steps:
{% endhint %}

> Refer the below snippet.

{% code title="page1.tsx" %}

```typescript
import { Link } from "@magicjs.dev/frontend"
import React from "react"
import { Button } from "antd"

export default function Component(props: any) {
    return (
        <div>
            Hello World from page 1
            <Link to="/page-2">
                <Button>Go to page 2</Button>
            </Link>
        </div>
    )
}
```

{% endcode %}

<details>

<summary>Expand for Tailwind styled code.</summary>

{% code lineNumbers="true" %}

```tsx
import { Link } from "@magicjs.dev/frontend"
import React from "react"
import { Button } from "antd"

export default function Component(props: any) {
    return (
        <div className="flex flex-col items-center text-center justify-center h-screen">
            <div className="flex gap-5 font-semi-bold sm:text-7xl tracking-wide pb-9">
                <h1 className="text-[#007E1D]">
                    Hello World
                </h1>
                <h1>from page 1</h1>
            </div>

            <Link to="/page-2/rubiks-cube">
                <Button className="text-xl w-80 h-14">
                    Go to page 2: Rubik's Cube
                </Button>
            </Link>
        </div>
    )
}
```

{% endcode %}

</details>

1. In `page1.tsx`, import the `Link` component from `magicjs.dev/frontend.`
2. Create a button inside the `Link` component, utilizing the AntD `Button`.
3. Set the `to` prop in the `Link` component to `"/page-2"`.
4. After refreshing the page, you'll see the button. Clicking on it will navigate to page 2.

> Now, Repeat these steps on the other page to establish bidirectional navigation between them.

## Utilizing Route Parameters

Next, let's explore how to add route parameters to page 2, such as `:productId`.

1. In `app.json` file, add `/:productId` to the path of page 2 and save.

> Refer the snippet given below.

```json
{
    "path": "/page-2/:productId",
    "view": "features/main-features/page2.tsx"
}
```

2. In `page2.tsx`, utilize the `useRoute` hook to access routing information and store its value in a variable named `route` and update the content to render the `productId` obtained from the route.&#x20;

> Refer the code given below.

{% code title="page2.tsx" %}

```tsx
import { Link, useRoute } from "@magicjs.dev/frontend"
import React from "react"
import { Button } from "antd"

export default function Component(props: any) {
    const route = useRoute()

    return (
        <div>
            {`Page for product: ${route?.match?.productId}`}
            <Link to="/page-1">
                <Button>Go to page 1</Button>
            </Link>
        </div>
    )
}
```

{% endcode %}

3. Update the link in page 1 to include a specific product ID, e.g., `/page-2/rubiks-cube`.

> Refer the code given below.

{% code title="page1.tsx" %}

```tsx
import { Link } from "@magicjs.dev/frontend"
import React from "react"
import { Button } from "antd"

export default function Component(props: any) {
    return (
        <div>
            Hello World from page 1
            <Link to="/page-2/rubiks-cube">
                <Button>Go to page 2: Rubik's Cube</Button>
            </Link>
        </div>
    )
}
```

{% endcode %}

<details>

<summary>Expand for Tailwind styled code.</summary>

{% code lineNumbers="true" %}

```typescript
import { Link } from "@magicjs.dev/frontend"
import React from "react"
import { Button } from "antd"

export default function Component(props: any) {
    return (
        <div className="flex flex-col items-center text-center justify-center h-screen">
            <h1 className="font-semi-bold sm:text-7xl tracking-wide pb-9">
                Page for Product: Rubiks-Cube
            </h1>

            <Link to="/page-1">
                <Button className="text-xl w-52 h-14">
                    Go to page 1
                </Button>
            </Link>
        </div>
    )
}
```

{% endcode %}

</details>

4. Refresh the page to see the updated navigation and dynamic rendering based on the route parameter.

<figure><img src="/files/jIkWL4Id5JBiomLXLCrk" alt=""><figcaption><p>Tailwind Styled Output</p></figcaption></figure>

:tada: Congratulations! You've learned how to link two pages within the MagicJS framework and utilize route parameters for dynamic page rendering.

***


---

# 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://skyslit.gitbook.io/magicjs/basic-guide/navigate-between-pages.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.