From af4b7f89510c9df825c78e8d8d71c9b0a5845100 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Tue, 9 Jan 2024 16:40:02 +0200
Subject: [PATCH] fix(clerk-js): Exclude external custom links from route
 matching

When the external links were included as part of custom pages the clerk-js router would break as it couldn't match against it.
Previously adding external links to custom pages would cause all pages that are defined below it to throw an error.
---
 .changeset/loud-tomatoes-jam.md              |  5 ++++
 packages/clerk-js/src/ui/elements/Navbar.tsx | 25 +++++++++-----------
 2 files changed, 16 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/loud-tomatoes-jam.md

diff --git a/.changeset/loud-tomatoes-jam.md b/.changeset/loud-tomatoes-jam.md
new file mode 100644
index 00000000000..6806bcb0c11
--- /dev/null
+++ b/.changeset/loud-tomatoes-jam.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Exclude external custom links from route matching. Previously adding external links to custom pages would cause all pages that are defined below it to throw an error.
diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index 3f0c6ea5760..32f63a02ef6 100644
--- a/packages/clerk-js/src/ui/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -1,5 +1,5 @@
 import { createContextAndHook } from '@clerk/shared/react';
-import React, { useEffect } from 'react';
+import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
 import { Button, Col, descriptors, Flex, Heading, Icon, Text, useLocalizations } from '../customizables';
@@ -33,7 +33,6 @@ export type NavbarRoute = {
   path: string;
   external?: boolean;
 };
-type RouteId = NavbarRoute['id'];
 type NavBarProps = {
   title: LocalizationKey;
   description: LocalizationKey;
@@ -44,7 +43,6 @@ type NavBarProps = {
 
 export const NavBar = (props: NavBarProps) => {
   const { contentRef, title, description, routes, header } = props;
-  const [activeId, setActiveId] = React.useState<RouteId>('');
   const { close } = useNavbarContext();
   const { navigate } = useRouter();
   const { navigateToFlowStart } = useNavigateToFlowStart();
@@ -61,7 +59,6 @@ export const NavBar = (props: NavBarProps) => {
 
   const navigateToInternalRoute = async (route: NavbarRoute) => {
     if (contentRef.current) {
-      setActiveId(route.id);
       close();
       if (route.path === '/') {
         // TODO: this is needed to correctly handle navigations
@@ -73,17 +70,17 @@ export const NavBar = (props: NavBarProps) => {
     }
   };
 
-  useEffect(() => {
-    routes.every(route => {
-      const isRoot = router.currentPath === router.fullPath && route.path === '/';
-      const matchesPath = router.matches(route.path);
-      if (isRoot || matchesPath) {
-        setActiveId(route.id);
+  const checkIfActive = useCallback(
+    (a: NavbarRoute) => {
+      if (a.external) {
         return false;
       }
-      return true;
-    });
-  }, [router.currentPath]);
+      const isRoot = router.currentPath === router.fullPath && a.path === '/';
+      const matchesPath = router.matches(a.path);
+      return isRoot || matchesPath;
+    },
+    [router.currentPath],
+  );
 
   const items = (
     <Col
@@ -99,7 +96,7 @@ export const NavBar = (props: NavBarProps) => {
           iconElementId={descriptors.navbarButtonIcon.setId(r.id) as any}
           onClick={handleNavigate(r)}
           icon={r.icon}
-          isActive={activeId === r.id}
+          isActive={checkIfActive(r)}
           sx={t => ({
             padding: `${t.space.$1x5} ${t.space.$3}`,
           })}