From 3657febb0ae559918cdcdc257e78d9d14f7b88af Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Mon, 26 Feb 2024 16:27:51 +0530
Subject: [PATCH] docs(remix): added additional notes for using Remix Link API

if we are using Remix API Layer Link from @remix-run/react, and using it == as={Link} then replace
the href with to, and we can use href if we are not using Link on naNavbar.Link & Sidebar.Item
---
 content/docs/guides/remix.mdx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/content/docs/guides/remix.mdx b/content/docs/guides/remix.mdx
index d0b093e87..2e7699f61 100644
--- a/content/docs/guides/remix.mdx
+++ b/content/docs/guides/remix.mdx
@@ -95,3 +95,23 @@ export default function Index() {
   return <Button>Click me</Button>;
 }
 ```
+
+## Additional Info
+
+To ensure smooth navigation within your application while using Remix components, it's important to align with Remix's API layer. By following these guidelines, you can optimize your navigation experience for users.
+
+**Best Practices**
+
+1. **Consider** `to` **instead of** `href`: When incorporating Remix components such as **`Navbar.Link`** or **`Sidebar.Item`**, keep in mind the usage of to instead of href when employing `as={Link}`. This step ensures seamless integration with Remix's API layer, maintaining consistency in navigation across your application.
+2. **Leverage Remix's API Layer:** Embrace Remix's API layer for enhanced routing capabilities. Utilizing `Link` components with the `to` prop enables you to specify navigation destinations accurately.
+3. **Example:**
+
+```tsx
+// Before
+<Navbar.Link href="/about">About</Navbar.Link>
+
+// After
+<Navbar.Link as={Link} to="/about">About</Navbar.Link>
+```
+
+By making this simple adjustment, replacing **href** with **to** and employing `as={Link}`, you adhere to Remix's API conventions seamlessly.