Navigate between pages

In this tutorial, we'll explore how to navigate between two pages within the MagicJS framework and utilize route parameters for dynamic page rendering.

The tool used in this guide is MERN.AI. You can download the free version by clicking here.

Navigate between pages

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:

page1.tsx

import React from "react"

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

Navigating Between Pages

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:

Refer the below snippet.

page1.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">
                <Button>Go to page 2</Button>
            </Link>
        </div>
    )
}

Expand for Tailwind styled code.

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>
    )
}

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.

{
    "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.

Refer the code given below.

page2.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>
    )
}

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

Refer the code given below.

page1.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>
    )
}

Expand for Tailwind styled code.

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>
    )
}

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

Tailwind Styled Output

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

---