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.
Setting Up Pages
Create two UI files named
page1.tsx
andpage2.tsx
, with corresponding paths '/page-1
' and '/page-2
' respectively.Update the content in each page for better understanding.
For example:
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.
In
page1.tsx
, import theLink
component frommagicjs.dev/frontend.
Create a button inside the
Link
component, utilizing the AntDButton
.Set the
to
prop in theLink
component to"/page-2"
.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
.
In
app.json
file, add/:productId
to the path of page 2 and save.
Refer the snippet given below.
In
page2.tsx
, utilize theuseRoute
hook to access routing information and store its value in a variable namedroute
and update the content to render theproductId
obtained from the route.
Refer the code given below.
Update the link in page 1 to include a specific product ID, e.g.,
/page-2/rubiks-cube
.
Refer the code given below.
Refresh the page to see the updated navigation and dynamic rendering based on the route parameter.
🎉 Congratulations! You've learned how to link two pages within the MagicJS framework and utilize route parameters for dynamic page rendering.
Last updated