# 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="https://629398272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrhfVeNvXQhNiRfJxJ9pq%2Fuploads%2F98NLsBcABzJnYBuPXfRo%2FNav%20Gif.gif?alt=media&#x26;token=334c2e06-231e-4f5c-b437-cb518c7456b9" 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.

***